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

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

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

Я могу вставить до/после существующего текста 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 есть плагин "вкладки в 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/

Просьба сообщить. Спасибо.

Ответы

Ответ 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 печально.

Ответ 2

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

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

Ответ 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();
    }
}