Сохранение позиции каретки в видимой позиции при вводе текста - Firefox плохо себя ведет - PullRequest
Новая
       14

Сохранение позиции каретки в видимой позиции при вводе текста - Firefox плохо себя ведет

4 голосов
/ 26 марта 2009

Я согласен с идеей для моего поля ввода текста - щелкнуть по элементу div, содержащему выборку «тегов», чтобы добавить мета-контент. Мой текстовый ввод имеет ширину 35, но я хочу, чтобы он мог переполняться.

Я искал и нашел методы для фокусировки и позиционирования моей каретки в конце обновленного входного содержимого, а Chrome и IE ведут себя и выполняют автоматическую прокрутку, чтобы показать курсор в видимой области поля ввода, но когда ввод текста переполнен и переполнен Firefox 3.0.7 оставляет правильно расположенную каретку вне поля зрения (хотя, если вы нажмете стрелку вправо на клавиатуре, вы сможете добраться до нее, не нарушая положения).

Любая помощь приветствуется.

Ответы [ 3 ]

2 голосов
/ 27 марта 2009

Смотрите мой ответ на этот вопрос . Хотя это относительно неаккуратно, вы можете вызвать событие нажатия клавиши в FF, и ввод прокрутится до конца (показывая каретку, где вы хотели бы ее видеть).

1 голос
/ 24 сентября 2009

У меня была похожая проблема с прокруткой к выделенной области в текстовой области в FireFox. Я не мог отправить символ пробела, затем символ возврата, потому что это перезаписало бы выделение в текстовой области. Поэтому я нашел лучший способ, который заключался бы в буквальной перепечатке букв сразу после выделения, что сделало бы выбор видимым.

Вот код: 

function setSelRange(inputEl, selStart, selEnd) { 
     if (inputEl.createTextRange) {
        var range = inputEl.createTextRange(); 
        range.collapse(true); 
        range.moveEnd('character', selEnd); 
        range.moveStart('character', selStart); 
        range.select(); 
        //range.scrollIntoView();
    } else if (inputEl.setSelectionRange) {
        inputEl.focus(); 
        inputEl.setSelectionRange(selEnd, selEnd + 1);
        // ---- Firefox Workaround ----
        // Send a virtual key, which is the character immediately after the 
        // selected text. It justs rewrites the same character so that no unnecessary changes
        // are made to the content.
        // When the selection is at the end of the textarea, an extra space is appended
        // because the inputEl.value.charCodeAt(selEnd) would otherwise cause an error.
        var evt = document.createEvent("KeyboardEvent");
        if (inputEl.value.length == selEnd) {
            evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32);
        } else {
            evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, inputEl.value.charCodeAt(selEnd));
        }
        inputEl.dispatchEvent(evt);
        inputEl.setSelectionRange(selStart, selEnd);

    } 
}

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

0 голосов
/ 28 марта 2009

Спасибо, у меня работает jtompson. В сочетании с существующим сценарием перемещение каретки в конец ввода текста или текстовой области, по-видимому, охватывает IE7, FF3 и chrome. 

    function setCaretPosition(elemId, caretPos) {
        var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.setSelectionRange(caretPos, caretPos);
                elem.focus();
                // Workaround for FF overflow no scroll problem
                // Trigger a "space" keypress.
                var evt = document.createEvent("KeyboardEvent");
                evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32);
                elem.dispatchEvent(evt);
                // Trigger a "backspace" keypress.
                evt = document.createEvent("KeyboardEvent");
                evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0);
                elem.dispatchEvent(evt);
            }
            else
                elem.focus();
        }
    }
}
 setCaretPosition(document.getElementById("searchinput").id, document.getElementById("searchinput").value.length);
...