JavaScript让Textarea支持tab按键的方法


Posted in Javascript onJune 26, 2015

本文实例讲述了JavaScript让Textarea支持tab按键的方法。分享给大家供大家参考。具体实现方法如下:

HTMLTextAreaElement.prototype.getCaretPosition = function () {
//return the caret position of the textarea
 return this.selectionStart;
};
HTMLTextAreaElement.prototype.setCaretPosition = function (position) {
//change the caret position of the textarea
 this.selectionStart = position;
 this.selectionEnd = position;
 this.focus();
};
HTMLTextAreaElement.prototype.hasSelection = function () {
//if the textarea has selection then return true
 if (this.selectionStart == this.selectionEnd) {
  return false;
 } else {
  return true;
 }
};
HTMLTextAreaElement.prototype.getSelectedText = function () {
//return the selection text
 return this.value.substring(this.selectionStart, this.selectionEnd);
};
HTMLTextAreaElement.prototype.setSelection = function (start, end) {
//change the selection area of the textarea
 this.selectionStart = start;
 this.selectionEnd = end;
 this.focus();
};
var textarea = document.getElementsByTagName('textarea')[0]; 
textarea.onkeydown = function(event) {
 //support tab on textarea
 if (event.keyCode == 9) { //tab was pressed
  var newCaretPosition;
  newCaretPosition = textarea.getCaretPosition() + " ".length;
  textarea.value = textarea.value.substring(0, textarea.getCaretPosition()) + " " + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
  textarea.setCaretPosition(newCaretPosition);
  return false;
 }
 if(event.keyCode == 8){
 //backspace
  if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") {
  //it's a tab space
   var newCaretPosition;
   newCaretPosition = textarea.getCaretPosition() - 3;
   textarea.value = textarea.value.substring(0, textarea.getCaretPosition() - 3) + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
   textarea.setCaretPosition(newCaretPosition);
  }
 }
 if(event.keyCode == 37){ //left arrow
  var newCaretPosition;
  if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") {
  //it's a tab space
   newCaretPosition = textarea.getCaretPosition() - 3;
   textarea.setCaretPosition(newCaretPosition);
  } 
 }
 if(event.keyCode == 39){
 //right arrow
  var newCaretPosition;
  if (textarea.value.substring(textarea.getCaretPosition() + 4, textarea.getCaretPosition()) == " ") {
  //it's a tab space
   newCaretPosition = textarea.getCaretPosition() + 3;
   textarea.setCaretPosition(newCaretPosition);
  }
 } 
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery中get和post的简单实例
Feb 04 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
jQuery的框架介绍
May 11 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
react-intl实现React国际化多语言的方法
Sep 27 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 #Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 #Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 #Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 #Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 #Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 #Javascript
jquery操作angularjs对象
Jun 26 #Javascript
You might like
PHP-MySQL教程归纳总结
2008/06/07 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
PHP类的特性实例分析
2016/09/28 PHP
php封装的smarty类完整实例
2016/10/19 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Python Flask框架扩展操作示例
2019/05/03 Python
python3.7 的新特性详解
2019/07/25 Python
python实现单链表的方法示例
2019/09/03 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
别名指示符是什么
2012/10/08 面试题
中专毕业自我鉴定
2013/10/16 职场文书
实习介绍信模板
2015/01/30 职场文书
教师个人自我评价
2015/03/04 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书