Нажатие клавиши в jQuery: нажмите TAB внутри TEXTAREA (при редактировании существующего текста)

Question

Я хочу вставить символы TAB в TEXTAREA, например:

<textarea>{KEYPRESS-INSERTS-TAB-HERE}Hello World</textarea>

Я могу вставить до / после существующий текст TEXTAREA - и я могу вставить / заменить весь текст в TEXTAREA - но пока не смог вставить внутрь простой текст существующего текста (курсором).

$('textarea:input').live('keypress', function(e) {
    if (e.keyCode == 9) {
        e.preventDefault();

        // Press TAB to append a string (keeps the original TEXTAREA text).
        $(this).append("TAB TAB TAB AFTER TEXTAREA TEXT");

        // Press TAB to append a string (keeps the original TEXTAREA text).
        $(this).focus().prepend("TAB TAB TAB BEFORE TEXTAREA TEXT");

        // Press TAB to replace a all text inside TEXTAREA.
        $(this).val("INSERT INTO TEXTAREA / REPLACE EXISTING TEXT");

    }
});

Для jQuery существует плагин "tabs in textarea" ( "Tabby" ) - но это 254 строки кода - я надеялся, что всего несколько строк кода.

Несколько ссылок, которые я изучил: (опять же, я бы предпочел меньше строк кода).

http://www.dynamicdrive.com/forums/showthread.php?t=34452
http://www.webdeveloper.com/forum/showthread.php?t=32317
http://pallieter.org/Projects/insertTab/

Пожалуйста, сообщите. Спасибо.

Answer 1

Я создавал простую IDE на AJAX для себя, чтобы быстро тестировать фрагменты PHP.

Я помню, что наткнулся на ту же проблему, вот как я ее решил:

$('#input').keypress(function (e) {
    if (e.keyCode == 9) {
        var myValue = "\t";
        var startPos = this.selectionStart;
        var endPos = this.selectionEnd;
        var scrollTop = this.scrollTop;
        this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos,this.value.length);
        this.focus();
        this.selectionStart = startPos + myValue.length;
        this.selectionEnd = startPos + myValue.length;
        this.scrollTop = scrollTop;

        e.preventDefault();
    }
});

#input - идентификатор текстовой области.

Код не полностью мой, я где-то нашел его в Google.

Я тестировал только на FF 3.5 и IE7. Это не работает на IE7, к сожалению.

Answer 2

К сожалению, манипулирование текстом внутри элементов textarea не так просто, как можно было бы надеяться. Причина, по которой Табби больше, чем у этих простых фрагментов, заключается в том, что он работает лучше. Он лучше совместим с разными браузерами и обрабатывает такие вещи, как выбор вкладок.

Когда минимизируется, это только около 5k. Я бы предложил использовать его. Вам в любом случае придется либо самостоятельно обнаруживать и устранять те же самые крайние случаи, либо даже не знать о них, если пользователи не сообщают о них.

Answer 3

Да, иметь дело с выбором полей ввода в разных браузерах - раздражение, тем более что в IE есть несколько методов, которые выглядят так, как будто они должны работать, но на самом деле это не так. (В частности, объединение с использованием setEndPoint, затем измерение length, которое выглядит нормально, пока выбор не начнется или не закончится в новых строках.)

Вот пара служебных функций, которые я использую для выбора входных данных. Возвращает значение входного значения, разбитого на биты, которые находятся до, внутри и после выделения (при этом выборка считается пустой строкой в ​​позиции фокуса ввода, если это не выбор). Это позволяет довольно просто заменять и вставлять контент в нужную точку, одновременно решая проблему IE CRLF.

(Может быть, jQuery делает что-то подобное, но я еще не встречал его.)

// getPartitionedValue: for an input/textarea, return the value text, split into
// an array of [before-selection, selection, after-selection] strings.
//
function getPartitionedValue(input) {
    var value= input.value;
    var start= input.value.length;
    var end= start;
    if (input.selectionStart!==undefined) {
        start= input.selectionStart;
        end= input.selectionEnd;
    } else if (document.selection!==undefined) {
        value= value.split('\r').join('');
        start=end= value.length;
        var range= document.selection.createRange();
        if (range.parentElement()===input) {
            var start= -range.moveStart('character', -10000000);
            var end= -range.moveEnd('character', -10000000);
            range.moveToElementText(input);
            var error= -range.moveStart('character', -10000000);
            start-= error;
            end-= error;
        }
    }
    return [
        value.substring(0, start),
        value.substring(start, end),
        value.substring(end)
    ];
}

// setPartitionedValue: set the value text and selected region in an input/
// textarea.
//
function setPartitionedValue(input, value) {
    var oldtop= input.scrollTop!==undefined? input.scrollTop : null;
    input.value= value.join('');
    input.focus();
    var start= value[0].length;
    var end= value[0].length+value[1].length;
    if (input.selectionStart!==undefined) {
        input.selectionStart= start;
        input.selectionEnd= end;
        if (oldtop!==null)
            input.scrollTop= oldtop;
    }
    else if (document.selection!==undefined) {
        var range= input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', end);
        range.moveStart('character', start);
        range.select();
    }
}

Answer 4

кстати, см. Также:
http://aspalliance.com/346_Tabbing_in_the_TextArea