logo标签列表

TextArea中如何捕获标签？

javascripthtmldom-eventskeylistener
9

有没有一种跨浏览器、可靠的解决方案，可以在文本区域字段中捕获Tab键的按下事件，并在正确的位置替换4个空格？该文本区域用于输入文章，并需要此功能。

注意：我尝试过使用FCKEditor等工具，但它们无法捕获Tab键并且有许多我不需要的功能。我只想要一个简单的解决方案来捕获Tab键。

可能重复的问题 https://dev59.com/ZnVD5IYBdhLWcg3wXaYd - freitass
1
该解决方案不适用于内联（如果字符串中间存在制表符），我认为。 - user122147
3个回答
9

我没有进行广泛的测试，但似乎这个方法可以工作：

（我在http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript#comment-3817找到了“insertAtCursor”函数）

<textarea id="text-area" rows="20" cols="100"></textarea>

<script>
document.getElementById("text-area").onkeydown = function(e) {
  if (!e && event.keyCode == 9)
  {
    event.returnValue = false;
    insertAtCursor(document.getElementById("text-area"), "    ");
  }
  else if (e.keyCode == 9)
  {
    e.preventDefault();
    insertAtCursor(document.getElementById("text-area"), "    ");
  }
};

//http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript#comment-3817
function insertAtCursor(myField, myValue) {
  //IE support
  if (document.selection) {
    var temp;
    myField.focus();
    sel = document.selection.createRange();
    temp = sel.text.length;
    sel.text = myValue;
    if (myValue.length == 0) {
      sel.moveStart('character', myValue.length);
      sel.moveEnd('character', myValue.length);
    } else {
      sel.moveStart('character', -myValue.length + temp);
    }
    sel.select();
  }
  //MOZILLA/NETSCAPE support
  else if (myField.selectionStart || myField.selectionStart == '0') {
    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
    myField.selectionStart = startPos + myValue.length;
    myField.selectionEnd = startPos + myValue.length;
  } else {
    myField.value += myValue;
  }
}
</script>

编辑：修改了脚本，不再使用jQuery。

0
<html>
<head>
    <script type="text/javascript">

        function keyHandler(e) {
            var TABKEY = 9;
            var backSlash = 8;
            var code = e.keyCode ? e.keyCode : e.charCode ? e.charCode : e.which;
            if(code == TABKEY && !e.shiftKey && !e.ctrlKey && !e.altKey) {
            var val = document.getElementById("t1");
                val.value=(val.value).substring(0,getCaret(val)) + "    " + (val.value).substring(getCaret(val));
                //document.getElementById("t1").value += "    ";

                if(e.preventDefault) {
                    e.preventDefault();
                } else {
                    e.returnValue = false;
                }
                val.focus(); 
                return false;
            }
            if(code == backSlash) {
                var val = document.getElementById("t1");
                val.value=(val.value).substring(0,getCaret(val)-4) + (val.value).substring(getCaret(val));
                if(e.preventDefault) {
                    e.preventDefault();
                } else {
                    e.returnValue = false;
                }
                return false;
            }

        }

        function getCaret(el) { 
          if (el.selectionStart) { 
            return el.selectionStart; 
          } else if (document.selection) { 
            el.focus(); 

            var r = document.selection.createRange(); 
            if (r == null) { 
              return 0; 
            } 

            var re = el.createTextRange(), 
                rc = re.duplicate(); 
            re.moveToBookmark(r.getBookmark()); 
            rc.setEndPoint('EndToStart', re); 

            return rc.text.length; 
          }  
          return 0; 
        }
    </script>
</head>
<body>
 <textarea id="t1" onkeydown="javascript:keyHandler(event)"></textarea>

</body>
</hrml>
-1

有没有什么原因你不能在编辑完成后直接替换制表符？我玩过很多次在文本区域中实时替换文本，发现这样做最好也不切实际。

2
关键是用户在使用页面时应该能够插入“制表符”，但默认情况下，Tab键会循环将焦点切换到下一个元素。 - user122147
那么你就要开始涉及到跨浏览器实现 onkeydown，这是我从未勇敢尝试过的事情。祝好运！ - Dave
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接