在 TextArea 中捕捉标签
Posted
技术标签:
【中文标题】在 TextArea 中捕捉标签【英文标题】：Catching Tabs in TextArea 【发布时间】：2010-11-09 11:30:13 【问题描述】：有没有人知道一种跨浏览器、可靠的解决方案，用于在 textarea 字段中按下制表键并替换（在正确位置）4 个空格？ textarea 用于输入文章，需要此功能。
注意：我尝试使用 FCKEditor 等，它没有捕获选项卡并且有一堆我不需要的功能。我想要一个仅用于捕获标签的简单解决方案。
【问题讨论】：
可能重复***.com/questions/3362/capturing-tab-key-in-text-box 我认为该解决方案不能内联（如果选项卡出现在字符串中间） 【参考方案1】：我没有进行广泛的测试，但这似乎有效：
（我在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>
EDIT：修改脚本使其不使用 jQuery。
【讨论】：
【参考方案2】：<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>
【讨论】：
【参考方案3】：是否有某些原因您不能在编辑完成后替换标签？在输入文本区域时，我玩了很多次替换文本，发现它......充其量是不切实际的。
【讨论】：
重点是用户在使用页面时应该能够插入“标签”，但默认情况下，tab 键会将焦点循环到下一个元素。 然后您将进入 onkeydown 的跨浏览器实现，这是我从未有勇气尝试的事情。祝你好运！以上是关于在 TextArea 中捕捉标签的主要内容，如果未能解决你的问题，请参考以下文章