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下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
用JS写一个发布订阅模式
Nov 07 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编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
Vue性能优化的方法
2020/07/30 Javascript
python获取本地计算机名字的方法
2015/04/29 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
python switch 实现多分支选择功能
2020/12/21 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
心理健康教育心得体会
2013/12/29 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
仓库管理计划书
2014/05/04 职场文书
应聘会计求职信
2014/06/11 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
小学安全教育主题班会
2015/08/12 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
nginx优化的六点方法
2021/03/31 Servers
浅谈JS的原型和原型链
2021/06/04 Javascript