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 相关文章推荐
JS日历 推荐
Dec 03 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
JavaScript中的闭包
Feb 24 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 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
Yii调试SQL的常用方法
2014/07/09 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
Javascript中的 “&” 和 “|” 详解
2017/02/02 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
升职自荐书范文
2013/11/28 职场文书
《尊严》教学反思
2014/02/11 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
幼儿评语大全
2014/04/30 职场文书
图书室标语
2014/06/21 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers