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 相关文章推荐
DWZ table的原生分页浅谈
Mar 01 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
Bootstrap插件全集
Jul 18 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
js中bool值的转换及“&&”、“||”、 “!!”详解
Dec 21 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 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中strtotime函数使用方法分享
2012/01/10 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
node 版本切换的实现
2020/02/02 Javascript
Vue的Options用法说明
2020/08/14 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
Python中super关键字用法实例分析
2015/05/28 Python
详解Python进程间通信之命名管道
2017/08/28 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
numpy.array 操作使用简单总结
2019/11/08 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
如何验证python安装成功
2020/07/06 Python
python 下划线的不同用法
2020/10/24 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
班组长安全工作职责
2014/07/15 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js