Question

如何创建一个允许用户输入标签的文本框，并且在按下标签按钮时不会将用户发送到下一个元素？

Answer 1

您只需要通过onkeydown检查标签event.keyCode === 9。将字符插入textarea非常重要 - 使用库或google进行'insertatcaret'。

Answer 2

jQuery已经有一些插件可以执行此操作。例如，一个是Tabby。

Answer 3

您可以使用JavaScript来捕获tab keypress事件并将其替换为空格（我不确定是否将标签插入到textarea中）。

E： This page 看起来很好。

Answer 4

<textarea onkeydown="return catchTab(this, event);">

JS代码：


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();
            }
        }
    }
}

function catchTab(item,e){
    if(navigator.userAgent.match("Gecko")){
        c=e.which;
    } else{
        c=e.keyCode;
    }
    if(c==9){
        replaceSelection(item, "\t");
        setTimeout(function() { item.focus() } , 0);
        return false;
    }
}

Answer 5

onkeypress，onkeyup或onkeydown检查按下的键，如果它是一个选项卡，则将\ t附加到文本框并返回false，以便焦点保留在文本框中您很可能必须使用文本范围，以便可以将选项卡插入到文本末尾的任何位置这是其余谷歌的基本想法是你的朋友：）

Answer 6

请勿尝试捕获 IE 中的“TAB”键的 onkeypress 事件（ it doesn'工作 ）（bug 249）

尝试onkeydown或onkeyup。

在文本框中标签

6 个答案: