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实现表格数据的动态添加与统计的代码
Jan 31 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
JsChart组件使用详解
Mar 04 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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插入排序法实现数组排序实例
2015/02/16 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
优秀的毕业生的自我评价
2013/12/12 职场文书
诚信承诺书范文
2014/03/27 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
Python字符串格式化方式
2022/04/07 Python