javascript实现textarea中tab键的缩排处理方法


Posted in Javascript onJune 26, 2015

本文实例讲述了javascript实现textarea中tab键的缩排处理方法。分享给大家供大家参考。具体如下:

网上搜索了一下相关的解决方法,其它的有使用两三行javascript解决的,但都有一些小小的问题。还有使用JQuery的,也非常简洁。

本文的javascript代码实现了在TEXTAREA中输入TAB键并自动缩进的功能。不过这段代码在谷歌浏览器中不能正常执行,在

sel =event.srcElement.document.selection.createRange()

这一句会发生错误:
ncaught exception TypeError: Cannot read property 'selection' of undefined

代码在IE中正常执行,如下:

<mce:script type="text/javascript">
<!-- 
function editTab() 
{ 
  var code, sel, tmp, r 
  var tabs="" 
  event.returnValue = false 
  sel =event.srcElement.document.selection.createRange() 
  r = event.srcElement.createTextRange() 
  switch (event.keyCode) 
  { 
    case (8)  : 
      if (!(sel.getClientRects().length > 1)) 
      { 
        event.returnValue = true 
        return 
      } 
      code = sel.text 
      tmp = sel.duplicate() 
      tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) 
      sel.setEndPoint("startToStart", tmp) 
      sel.text = sel.text.replace(/^/t/gm, "") 
      code = code.replace(/^/t/gm, "").replace(//r/n/g, "/r") 
      r.findText(code) 
      r.select() 
      break 
    case (9)  : 
      if (sel.getClientRects().length > 1) 
      { 
        code = sel.text 
        tmp = sel.duplicate() 
        tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) 
        sel.setEndPoint("startToStart", tmp) 
        sel.text = "/t"+sel.text.replace(//r/n/g, "/r/t") 
        code = code.replace(//r/n/g, "/r/t") 
        r.findText(code) 
        r.select() 
      } 
      else 
      { 
        sel.text = "/t" 
        sel.select() 
      } 
      break 
    case (13)  : 
      tmp = sel.duplicate() 
      tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) 
      tmp.setEndPoint("endToEnd", sel) 
      for (var i=0; tmp.text.match(/^[/t]+/g) && i<tmp.text.match(/^[/t]+/g)[0].length; i++)  tabs += "/t" 
      sel.text = "/r/n"+tabs 
      sel.select() 
      break 
    default   : 
      event.returnValue = true 
      break 
  } 
} 
// -->
</mce:script>

使用时:

<textarea cols=80 rows=20 name="input" onkeydown="editTab()"></textarea>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
菜鸟javascript基础整理1
Dec 06 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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
jQuery检查事件是否触发的方法
Jun 26 #Javascript
You might like
PHP数组实例总结与说明
2011/08/23 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
python实现ID3决策树算法
2017/12/20 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
写好自荐信的技巧
2013/11/08 职场文书
《王二小》教学反思
2014/02/27 职场文书
幼儿发展评估方案
2014/06/11 职场文书
交通事故委托书范本
2014/09/28 职场文书
管理人员岗位职责
2015/02/14 职场文书
篮球赛新闻稿
2015/07/17 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书