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

 更新时间:2015年06月26日 15:16:21   作者:jcwKyl  
这篇文章主要介绍了javascript实现textarea中tab键的缩排处理方法,涉及javascript处理鼠标事件及页面元素的相关技巧,需要的朋友可以参考下

本文实例讲述了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中ES6 Babel正确安装过程

    JavaScript中ES6 Babel正确安装过程

    这篇文章主要介绍了JavaScript中ES6 Babel正确安装过程的相关资料,需要的朋友可以参考下
    2016-07-07
  • 一定有你会用到的JavaScript一行代码实用技巧总结

    一定有你会用到的JavaScript一行代码实用技巧总结

    这篇文章主要为大家介绍了一定有你会用到的JavaScript一行代码总结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • javascript操作excel生成报表全攻略

    javascript操作excel生成报表全攻略

    这篇文章主要介绍了如何使用javascript操作excel生成报表,需要的朋友可以参考下
    2014-05-05
  • javascript模拟评分控件实现方法

    javascript模拟评分控件实现方法

    这篇文章主要介绍了javascript模拟评分控件实现方法,涉及javascript操作页面元素与样式的相关技巧,需要的朋友可以参考下
    2015-05-05
  • JavaScript中新数组分组方法详解

    JavaScript中新数组分组方法详解

    对数组中的项目进行分组,你可能已经做过很多次了,好消息是,JavaScript 现在有了分组方法,所以你再也不必这样做了,下面我们就来看看它们的具体使用吧
    2024-02-02
  • 聊聊JavaScript中的try...catch使用小技巧

    聊聊JavaScript中的try...catch使用小技巧

    作为一名web前端工程师,JavaScript中的try...catch是我们常用的特性之一,用于处理代码中可能出现的错误,本文小编将和大家一起聊聊JavaScript中的try...catch使用小技巧,需要的朋友可以参考下
    2023-11-11
  • JavaScript实现获取年月日时间的方法总结

    JavaScript实现获取年月日时间的方法总结

    这篇文章主要为大家学习介绍了JavaScript如何实现获取年月日以及各种格式的时间,文中的示例代码简洁易懂,感兴趣的小伙伴可以了解一下
    2023-08-08
  • 小程序实现搜索框

    小程序实现搜索框

    搜索框无论是在电商网站还是小程序中都很常见,这篇文章主要就为大家详细介绍了小程序如何实现搜索框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • JS如何实现封装列表右滑动删除收藏按钮

    JS如何实现封装列表右滑动删除收藏按钮

    这篇文章主要介绍了JS如何实现封装列表右滑动删除收藏按钮,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JS函数节流和函数防抖问题分析

    JS函数节流和函数防抖问题分析

    这篇文章主要介绍了JS函数节流和函数防抖问题分析,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-12-12

最新评论