Javascript 捕捉文本区域中的选项卡
是否有人知道一种跨浏览器、可靠的解决方案，用于捕获文本区域字段中的tab键并替换（在正确位置）4个空格？textarea用于输入文章，需要此功能Javascript 捕捉文本区域中的选项卡,javascript,html,javascript-events,keylistener,Javascript,Html,Javascript Events,Keylistener,是否有人知道一种跨浏览器、可靠的解决方案，用于捕获文本区域字段中的tab键并替换（在正确位置）4个空格？textarea用于输入文章，需要此功能 注意：我试过使用FCKEditor，除其他外，它没有捕捉标签，并且有一系列我不需要的特性。我想要一个简单的解决方案，只用于抓取选项卡。编辑完成后，有什么原因不能直接替换选项卡吗？我在一个文本区域中输入文本时，已经尝试了很多替换文本的方法，发现它是。。。充其量是不切实际的。我没有进行广泛的测试，但这似乎有效： （我在上找到了“insertAtCursor
注意：我试过使用FCKEditor，除其他外，它没有捕捉标签，并且有一系列我不需要的特性。我想要一个简单的解决方案，只用于抓取选项卡。编辑完成后，有什么原因不能直接替换选项卡吗？我在一个文本区域中输入文本时，已经尝试了很多替换文本的方法，发现它是。。。充其量是不切实际的。我没有进行广泛的测试，但这似乎有效： （我在上找到了“insertAtCursor”函数）
document.getElementById（“文本区域”）.onkeydown=函数（e）{
如果（！e&&event.keyCode==9）
{
event.returnValue=false；
insertAtCursor（document.getElementById（“文本区域”），“”）；
}
否则如果（e.keyCode==9）
{
e、 预防默认值（）；
insertAtCursor（document.getElementById（“文本区域”），“”）；
}
};
//http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript#comment-3817
函数insertAtCursor（myField，myValue）{
//IE支持
if（文档选择）{
无功温度；
myField.focus（）；
sel=document.selection.createRange（）；
温度=选择文本长度；
sel.text=myValue；
如果（myValue.length==0）{
sel.moveStart（'character'，myValue.length）；
sel.moveEnd（'character'，myValue.length）；
}否则{
选择moveStart（'character'，-myValue.length+temp）；
}
sel.select（）；
}
//MOZILLA/NETSCAPE支持
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；
}否则{
myField.value+=myValue；
}
}
<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>
函数keyHandler（e）{
var-TABKEY=9；
var反斜杠=8；
var代码=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+=“”；
如果（如默认）{
e、 预防默认值（）；
}否则{
e、 returnValue=false；
}
val.focus（）；
返回false；
}
如果（代码==反斜杠）{
var val=document.getElementById（“t1”）；
val.value=（val.value）.substring（0，getCaret（val）-4）+（val.value）.substring（getCaret（val））；
如果（如默认）{
e、 预防默认值（）；
}否则{
e、 returnValue=false；
}
返回false；
}
}
函数getCaret（el）{
如果（el.selectionStart）{
返回el.selectionStart；
}else if（document.selection）{
el.focus（）；
var r=document.selection.createRange（）；
如果（r==null）{
返回0；
}
var re=el.createTextRange（），
rc=re.duplicate（）；
关于moveToBookmark（r.getBookmark（））；
rc.setEndPoint（'EndToStart'，re）；
返回rc.text.length；
}
返回0；
}
可能复制了该解决方案不在内联工作（如果标签出现在字符串的中间），我认为用户应该能够在使用页面时插入“选项卡”，但默认情况下，Tab键会将焦点循环到下一个元素。然后，您将进入OnKeKDOWN的跨浏览器实现，这是我从来没有足够的勇气去尝试的。祝你好运
<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>