在文本框中标签

时间:2009-02-15 11:34:59

标签: html user-interface

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

6 个答案:

答案 0 :(得分:7)

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

答案 1 :(得分:5)

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

答案 2 :(得分:2)

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

E: This page 看起来很好。

答案 3 :(得分:2)

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

答案 4 :(得分:1)

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

答案 5 :(得分:0)

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

尝试onkeydown或onkeyup。