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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • javascript获得光标所在的文本框(text/textarea)中的位置

    js获得光标所在的文本框(text/textarea)中的位置 function getPosition(obj){ var result = 0; if(obj.selectionStart){ //IE以外 result = obj.selectionStart }else{ //IE var rng; if(obj.tagName == "textarea"){ //TEXTAREA rng = event.srcElement.createTextRange(); rng.mo

  • JavaScript让Textarea支持tab按键的方法

    本文实例讲述了JavaScript让Textarea支持tab按键的方法.分享给大家供大家参考.具体实现方法如下: HTMLTextAreaElement.prototype.getCaretPosition = function () { //return the caret position of the textarea return this.selectionStart; }; HTMLTextAreaElement.prototype.setCaretPosition = funct

  • JavaScript中统计Textarea字数并提示还能输入的字符

    现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验. 如果实现这种技术呢,我进行了一些研究,发现实现其实挺简单,几行代码就能完成输入字符统计功能,经过实际测试,其对文字的统计与Twitter等微博客的完全相同. 使用方法是,先增加一个span,用于显示剩余的字数,然后在Textarea中,加入一个onkeydown和onkeyup的事件,调用另一

  • javascript textarea字数限制

    这一个是读取textarea的maxlength属性的值,进行计算,思路很好,但修改起来就麻烦啊,不过对于js爱好者来说是个不错的参考,通过读取属性值进行控制. textarea字数限制 练习代码多有参考网络 by ahuinan var TextUtil = new Object(); TextUtil.NotMax = function(oTextArea){ var maxText = oTextArea.getAttribute("maxlength"); if(oTextAr

  • JavaScript实现点击自动选择TextArea文本的方法

    本文实例讲述了JavaScript实现点击自动选择TextArea文本的方法.分享给大家供大家参考.具体实现方法如下: <textarea rows="10" cols="50" onclick="this.focus();this.select()" readonly="readonly"> example text </textarea> 希望本文所述对大家的javascript程序设计有所帮助.

  • JavaScript动态调整TextArea高度的代码

    核心代码: 复制代码 代码如下: <script language="javascript" type="text/javascript"> function adjustObjHeight(obj, defaultHeight) { if(obj.scrollHeight > defaultHeight) { obj.style.height = obj.scrollHeight + 'px'; } else { obj.style.height

  • JavaScript 监听textarea中按键事件

    有个textarea, Java代码 复制代码 代码如下: <textarea id="text"></textarea> 经常会定义onKeyPress="keypress();",并定义以下方法. 复制代码 代码如下: var keypress = function(e){ var e = e || window.event; var k = e.keyCode; } 这里我使用的办法是JQuery. 复制代码 代码如下: $("

  • JavaScript判断textarea值是否为空并给出相应提示

    我们在网页设计中常常会用JavaScript来判断用户是否输入合法数据,假如用户没有输入数据则给出相应提示,那么该如何来判断呢?这里向大家介绍用JavaScript判断textarea值是否为空的方法. 下面给出JavaScript函数: if(document.getElementById("htmer").value==''){alert("请输入内容!");return false;} 注意上面代码中的红色部分=='',是单引号而不是双引号,这样可以减少很多不

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

    本文实例讲述了javascript实现textarea中tab键的缩排处理方法.分享给大家供大家参考.具体如下: 网上搜索了一下相关的解决方法,其它的有使用两三行javascript解决的,但都有一些小小的问题.还有使用JQuery的,也非常简洁. 本文的javascript代码实现了在TEXTAREA中输入TAB键并自动缩进的功能.不过这段代码在谷歌浏览器中不能正常执行,在 复制代码 代码如下: sel =event.srcElement.document.selection.createRa

  • WinForm中变Enter键为Tab键实现焦点转移的方法

    本文实例讲述了WinForm中变Enter键为Tab键实现焦点转移的方法,在进行C#应用程序开发时有一定的实用价值.分享给大家供大家参考. 具体实现代码如下: /// <summary> /// 窗体控件控制相关的方法 /// </summary> public class ControlTools { private Form frm; public ControlTools(Form frm) { this.frm = frm; } /// <summary> //

  • python中tab键是什么意思

    对于程序员来说,其实Tab和空格远远不只是"立场"问题那么简单. 在不同的编辑器里tab的长度可能不一致,所以在一个编辑器里用tab设置缩进后,在其它编辑器里看可能缩进就乱了.空格不会出现这个问题,因为空格就占一个字符的位置. 众所周知,Tab在ASCII码中,编码是9,而空格是32.这也就是说,当我们按下一个Tab的时候,即使它看起来就是8个空格(或者4个空格,不同的环境下,Tab可能显示的效果不同),对于电脑来说,却是完全不一样的东西.这也意味着,对于用字符来描述过程的代码来说,极

  • JavaScript在网页中画圆的函数arc使用方法

    JavaScript在网页中画圆的函数arc使用方法

    一.arc所需要的参数设置 复制代码 代码如下: arc(x, y, radius, startAngle, endAngle, counterclockwise); 其中x,y,radius都很容易理解,那么重点说说startAngle,endAngle和counterclockwise三个参数! 二.arc参数详解 1,startAngle和endAngle分别指圆开始的角度和结束的角度,手册上面说的是开始的角度为0,结束的角度为Math.PI*2,这样正好画一个圆 2,下面通过实例来讲解s

  • 一个JavaScript处理textarea中的字符成每一行实例

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>每天一个JavaScript实例-处理textarea中的字符成每一行</title> <script> function clicka(){ console.log("aaa"); var aa = document.get

  • 用javascript获取textarea中的光标位置

    对于写javascript写网页编辑器的人来说,获取textarea中的光标位置是一个非常重要的问题,而往往很多人在这个地方不知所措,找不到好的办法.昨天我在网上找到了一段javascript代码,本来不想把原版放在这里的,就是因为太精彩了,怕我给改坏了,所以还是原版放在这里吧. var start=0;     var end=0;     function add(){                var textBox = document.getElementById("ta"

  • 网页防止tab键的使用快速解决方法

    在一些网页或者说在弹出层的使用下,一般情况在ie浏览器下 我们都不希望使用tab 或者说 使用tab键后都会造成一定的问题,例如: 在弹出层后,tab键还可以在目页中操作,这回导致脚本错误. 那么我们如果避免这种情况呢? 通过键盘事件来控制 复制代码 代码如下: <script language="javascript" type="text/javascript" src="../javascript/jquery-1.2.6.min.js&quo

  • 全面解析Bootstrap中tab（选项卡）的使用方法

    本文实例为大家介绍实现tab选项卡的应用,此插件相对比较简单,具体内容如下 源码文件: tab.js 实现原理: 1.单击一个元素时,首先将原来高亮的元素取消 2.然后给被单击元素进行高亮 3.如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5.如果定义了动画,先执行动画,然后回调 源码分析: 1.Show方法,是在单击一个元素的时候触发,会触发如下四个事件   1.1.Hiden.bs.tab:隐藏上一个元素   1.2.Show.bs.tab:显示当前元素   1.3.Hidee

  • JavaScript获取table中某一列的值的方法

    JavaScript获取table中某一列的值的方法

    1.实现源码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

随机推荐