如何在 HTML 编辑框中允许选项卡？答案

【问题标题】：How to allow tabs in an HTML Edit box?如何在 HTML 编辑框中允许选项卡？
【发布时间】：2009-12-18 01:13:26
【问题描述】：

我知道这可能是一个非常初学者的问题，但我似乎无法找到答案。

如何让多行 HTML 编辑框允许标签放入其中？（而不是标签转到下一个控件）

我也更愿意在没有 javascript 的情况下执行此操作。

【问题讨论】：

+1 因为你有 1337 个代表似乎不公平
当我等着看它持续多久。现在我不得不被否决几次大声笑

标签： c# asp.net html

【解决方案1】：

如果没有 JavaScript，您将无法做到这一点。如果你想走这条路，这里是sample done with jQuery。

【讨论】：

请在此答案中添加更多内容。让它依赖链接是不好的做法。
好吧，他不想使用 JavaScript，所以我的回答是“你不能这样做”。我只是提供了额外的资源。 ;)
嗯，我有时不认为 jQuery 是 javascript，因为它是如此简单 :) 甚至添加到 asp.net webapp 中的 javascript 都是微不足道的，所以它就是 jQuery！

【解决方案2】：

见here:

<html>
<head>
<script type="text/javascript">
function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function replaceSelection (input, replaceString) {
    if (input.setSelectionRange) {
        var selectionStart = input.selectionStart;
        var selectionEnd = input.selectionEnd;
        input.value = input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd);

        if (selectionStart != selectionEnd){ 
            setSelectionRange(input, selectionStart, selectionStart +   replaceString.length);
        }else{
            setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length);
        }

    }else if (document.selection) {
        var range = document.selection.createRange();

        if (range.parentElement() == input) {
            var isCollapsed = range.text == '';
            range.text = replaceString;

             if (!isCollapsed)  {
                range.moveStart('character', -replaceString.length);
                range.select();
            }
        }
    }
}


// We are going to catch the TAB key so that we can use it, Hooray!
function catchTab(item,e){
    if(navigator.userAgent.match("Gecko")){
        c=e.which;
    }else{
        c=e.keyCode;
    }
    if(c==9){
        replaceSelection(item,String.fromCharCode(9));
        setTimeout("document.getElementById('"+item.id+"').focus();",0);    
        return false;
    }

}
</script>
</head>
<body>
<form>
<textarea name="data" id="data" rows="20" columns="35" wrap="off" onkeydown="return catchTab(this,event)" ></textarea>
<input type="submit" name="submit" value="Submit"/>
</form>

【讨论】：

【解决方案3】：

预感很疯狂，但我认为您希望在页面上有多个 HTML 编辑框，然后使用 javascript（如 jQuery）将它们放置到单独的选项卡中。

标签需要某种 javascript 来创建交互。

（呃。忽略。我在考虑可视用户界面选项卡。不是选项卡字符。）

【讨论】：

我认为他的意思是 Tab 是一系列空格（键盘上的 Tab 键），我不确定你的意思。 :)

【解决方案4】：

<input id="textbox" />

<script language="JavaScript">
<!--


    var textbox = document.getElementById("textbox");
    if (textbox.addEventListener)
        textbox.addEventListener("keydown", this.textbox_keyHandler, false);
    else if (textbox.attachEvent)
        textbox.attachEvent("onkeydown", this.textbox_keyHandler);
    function textbox_keyHandler(e)
    {
        if (e.keyCode == 9)
        {
            var textbox = document.getElementById("textbox");
            textbox.value += "\t";
            if(e.preventDefault) e.preventDefault();
            return false;
        }
    }

// -->
</script>

【讨论】：

如果光标不在文本框的末尾，这将无法正常工作。