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 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
20个最新的jQuery插件
Jan 13 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
微信小程序实现文件预览
Oct 22 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
基于empty函数的判断详解
2013/06/17 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php的dl函数用法实例
2014/11/06 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
浅谈PHP进程管理
2019/03/08 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
python学生管理系统学习笔记
2019/03/19 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
实习评语
2013/12/16 职场文书
好人好事演讲稿
2014/09/01 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
公司奖励通知
2015/04/21 职场文书
名人传读书笔记
2015/06/26 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android