Вкладка в текстовые поля

Question

Как создать текстовое поле, которое позволяет пользователям вводить вкладки и не отправляет пользователя на следующий элемент при нажатии кнопки вкладки?

Answer 1

Вам нужно только проверить наличие вкладок onkeydown через event.keyCode === 9. Вставка символа в текстовое поле нетривиальна - используйте библиотеку или Google для «insertatcaret».

Answer 2

Уже есть несколько плагинов для jQuery , которые делают это. Например, Табби .

Answer 3

<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 4

Вы можете использовать JavaScript, чтобы перехватить событие нажатия клавиши табуляции и заменить его пробелами (я не уверен насчет вставки табуляции в текстовое поле).

E: Эта страница выглядит хорошо.

Answer 5

onkeypress, onkeyup или onkeydown проверяют нажатую клавишу, и если это вкладка, добавьте \ t к текстовому полю и верните false, чтобы фокус оставался на текстовом поле. вам, скорее всего, придется использовать текстовые поля, чтобы вкладки можно было вставлять в любом месте, кроме конца текста это основная идея для остальных Google это твой друг:)

Answer 6

НЕ пытаться перехватить событие onkeypress для клавиши 'TAB' в IE ( не работает ) ( ошибка 249 )

Попробуйте вместо этого использовать onkeydown или onkeyup.