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 ui resizable bug解决方法
Oct 26 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
js获取视频时长代码
Apr 10 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
JavaScript基础之this详解
Jun 04 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
原生js实现照片墙效果
Oct 13 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
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
基于mysql的论坛(4)
2006/10/09 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
django配置app中的静态文件步骤
2020/03/27 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
淘宝店铺营销方案
2014/02/13 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
公司营业员的自我评价
2014/03/04 职场文书
经销商订货会主持词
2014/03/27 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL