JavaScript: прокрутите до выделения после использования textarea.setSelectionRange в Chrome.

Ответ 1

Вот простое и эффективное решение, чисто js:

//first of all, you ignore any bad english, as i'm french and had a funny evening
//get the textarea
var textArea = document.getElementById('myTextArea');

//define your selection
var selectionStart = 50;
var selectionEnd = 60;
textArea.setSelectionRange( selectionStart, selectionEnd);

// now lets do some math
// we need the number of chars in a row
var charsPerRow = textArea.cols;

// we need to know at which row our selection starts
var selectionRow = (selectionStart - (selectionStart % charsPerRow)) / charsPerRow;

// we need to scroll to this row but scrolls are in pixels,
// so we need to know a row height, in pixels
var lineHeight = textArea.clientHeight / textArea.rows;

// scroll !!
textArea.scrollTop = lineHeight * selectionRow;

Поместите это в функцию, расширьте прототип объекта javascript Element с ним, и вы хорошо.

Не стесняйтесь спрашивать, нужна ли вам дополнительная помощь.

Ответ 2

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

Ответ 3

Я опубликовал ответ здесь:

http://blog.blupixelit.eu/scroll-textarea-to-selected-word-using-javascript-jquery/

Он отлично работает с jsut одним необходимым правилом: установите высоту строки n в css текстового поля!

Он вычисляет позицию слова, чтобы прокрутить, просто выполнив простой математический расчет, и он отлично работал во всех моих экспериментах!

Не стесняйтесь спрашивать меня все, что вам нужно о коде!

Ответ 4

Это код, вдохновленный ответом Matta Flaschen .

/**
 * Scroll textarea to position.
 *
 * @param {HTMLInputElement} textarea
 * @param {Number} position
 */
function scrollTo(textarea, position) {
    if (!textarea) { return; }
    if (position < 0) { return; }

    var body = textarea.value;
    if (body) {
        textarea.value = body.substring(0, position);
        textarea.scrollTop = position;
        textarea.value = body;
    }
}

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

Используйте его следующим образом

var textarea, start, end;
/* ... */

scrollTo(textarea, end);
textarea.focus();
textarea.setSelectionRange(start, end);

Ответ 5

 //Complete code for chrome

              var SAR = {};

            SAR.find = function () {
                debugger;
                var parola_cercata = $("#text_box_1").val(); // the searched word
                // make text lowercase if search is supposed to be case insensitive
                var txt = $('#remarks').val().toLowerCase();
                parola_cercata = parola_cercata.toLowerCase();

                var posi = jQuery('#remarks').getCursorPosEnd(); // take the position of the word in the text

                var termPos = txt.indexOf(parola_cercata, posi);

                if (termPos !== -1) {
                    debugger;
                    var target = document.getElementById("remarks");
                    var parola_cercata2 = $("#text_box_1").val();
                    // select the textarea and the word
                    if (target.setSelectionRange) {

                        if ('selectionStart' in target) {
                            target.selectionStart = termPos;
                            target.selectionEnd = termPos;
                            this.selectionStart = this.selectionEnd = target.value.indexOf(parola_cercata2);
                            target.blur();
                            target.focus();
                            target.setSelectionRange(termPos, termPos + parola_cercata.length);
                        }
                    } else {
                        var r = target.createTextRange();
                        r.collapse(true);
                        r.moveEnd('character', termPos + parola_cercata);
                        r.moveStart('character', termPos);
                        r.select();
                    }
                } else {
                    // not found from cursor pos, so start from beginning
                    termPos = txt.indexOf(parola_cercata);
                    if (termPos !== -1) {
                        var target = document.getElementById("remarks");
                        var parola_cercata2 = $("#text_box_1").val();
                        // select the textarea and the word
                        if (target.setSelectionRange) {

                            if ('selectionStart' in target) {
                                target.selectionStart = termPos;
                                target.selectionEnd = termPos;
                                this.selectionStart = this.selectionEnd = target.value.indexOf(parola_cercata2);
                                target.blur();
                                target.focus();
                                target.setSelectionRange(termPos, termPos + parola_cercata.length);
                            }
                        } else {
                            var r = target.createTextRange();
                            r.collapse(true);
                            r.moveEnd('character', termPos + parola_cercata);
                            r.moveStart('character', termPos);
                            r.select();
                        }
                    } else {
                        alert("not found");
                    }
                }
            };


            $.fn.getCursorPosEnd = function () {
                var pos = 0;
                var input = this.get(0);
                // IE Support
                if (document.selection) {
                    input.focus();
                    var sel = document.selection.createRange();
                    pos = sel.text.length;
                }
                // Firefox support
                else if (input.selectionStart || input.selectionStart === '0')
                    pos = input.selectionEnd;
                return pos;
            };
        </script>