настройка теряет позицию каретки на элементе <pre>при нажатии клавиши TAB - PullRequest
Новая
       23

настройка теряет позицию каретки на элементе <pre>при нажатии клавиши TAB

7 голосов
/ 23 февраля 2011

У меня есть pre с contentEditable="true" на моей веб-странице, и я пытаюсь добавить его "\t", когда нажимаю <TAB>. Я нашел несколько других плагинов для этого, но они работали только на <textarea>.

Итак, проблема в том, что когда я добавляю текст к <pre> через jQuery, он теряет позицию каретки. Я был уверен, что терял фокус, но это не так. Так что $("pre").focus(), ничего не поделаешь.

Сначала я попытался стереть это, но это не практично, потому что каретка вернется в другое положение в зависимости от браузера. помогите пожалуйста ...: P,

Мой код здесь: http://jsfiddle.net/parisk/kPRpj/

Ответы [ 4 ]

2 голосов
/ 12 июля 2011

Попробуйте использовать document.execCommand. Вот демоверсия .Короче говоря: 

$("pre").keydown(function(e){
    if (e.keyCode==9) {
        e.preventDefault();
        document.execCommand('InsertHTML', false, '\t');
    }
});
0 голосов
/ 05 мая 2011

Только к вашему вопросу библиотеки JQuery Caret довольно хорошо инкапсулируют причуды вокруг разных браузеров (а именно IE): http://plugins.jquery.com/plugin-tags/caret

Вы всегда можете просто использовать это, чтобы получить индекс всехпозиции вкладок, а затем очистить их позже ...

0 голосов
/ 09 мая 2011

Ответ Джеймса Хури всегда ставит каретку в конце <pre>, что нежелательно, когда пользователь нажимает tab в середине текста.

Вот измененная версия, которая исправляетэта проблема: http://jsfiddle.net/kPRpj/12/. Должно быть довольно просто сделать tab отступом строки вместо добавления символа tab в позиции каретки.Для этого вы должны заменить 

container.textContent = text.substring(0,start)+'\t'+text.substring(end);

на 

var left = text.substring(0,start);
var lastLine = left.lastIndexOf("\n");
if (lastLine == -1) lastLine = 0;
container.textContent = left.substring(0,lastLine)+'\t'+text.substring(lastLine);

Я поставил версию , которая ведет себя таким образом на jsfiddle.Однако вам может понадобиться обойти некоторые несоответствия в их управлении '\n\r'.Например, я вижу, что хром видит каждую строку как отдельный текстовый узел, что довольно неожиданно.Я не тестировал его в других браузерах.

0 голосов
/ 14 апреля 2011

сначала попробуй 

$("pre").keydown(function(e){
    if (e.keyCode==9) {
        e.preventDefault();
        $("pre").append("\t");   
    }
});

для вставки вкладки. он вставит вкладку после вашего курсора

тогда в хроме 

var myselection = document.getSelection();
myselection.extend(jQuery("pre")[0].lastChild, jQuery("pre")[0].lastChild.length)
myselection.collapseToEnd();

в IE8 

var myselection = document.selection;
myselection.extend(jQuery("pre")[0].lastChild, jQuery("pre")[0].lastChild.length)
myselection.collapseToEnd();

должен помочь вам в конце.

(все вместе) 

$("pre").keydown(function(e){
    if (e.keyCode==9) {
        e.preventDefault();
        $("pre").append("\t"); 

        var myselection = null;
        if(document.getSelection)
        {
            myselection = document.getSelection();
        }
        else if (document.selection)
        {
            myselection = document.selection;
        }

        if(myselection != null)
        {
            myselection.extend(jQuery("pre")[0].lastChild, jQuery("pre")[0].lastChild.length)
            myselection.collapseToEnd();
         }
    }
});

EDIT также было бы безопаснее добавить в тест, чтобы увидеть, является ли lastChild нулевым, и тому подобное. Также в функции keydown jQuery("pre") было бы лучше быть jQuery(this) и поместить в переменную, если вы используете более одного раза. (что пример, но я ленивый)

...