JavaScript：Chromeでtextarea.setSelectionRangeを使用して選択範囲までスクロール

Question

javascript関数は、.setSelectionRange（）を使用してテキストエリア内の特定の単語を選択します。 Firefoxでは、テキストエリアが自動的に下にスクロールされ、選択したテキストが表示されます。 Chrome（v14）ではそうはしません。 Chromeでテキストエリアを新しく選択したテキストにスクロールさせる方法はありますか？ jQueryソリューションは大歓迎です。

Answer 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's height, in pixels 
var lineHeight = textArea.clientHeight/textArea.rows; 

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

が、それにはJavaScriptのElementオブジェクトのプロトタイプを拡張して、あなたは良いです。

さらなるヘルプが必要な場合はお気軽にお問い合わせください。

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

それはjsut 1必要なルールと完璧に動作します：：

Answer 2

私たちがどのように問題を解決したかを見ることができますin ProveIt（highlightLengthAtIndexを参照）。基本的には、テキストエリアを切り捨て、最後までスクロールして、テキストの2番目の部分を復元することです。また、ブラウザ間の一貫性を維持するためにtextSelectionプラグインを使用しました。

Answer 3

は、私はここで答えを発表した行の高さのnテキストエリアのCSSを設定します！

単純な数学計算をするだけでスクロールする単語の位置が計算され、すべての実験で完全に機能しました！

コードについて必要なものは何でもお気軽にお問い合わせください！

Answer 4

これはMatthew Flaschenのanswerに触発されたコードです。

/** 
* 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; 
    } 
} 

は基本的に、トリックは、TEXTAREAを切り捨てる端までスクロールし、テキストの第二の部分を復元することです。

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

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

Answer 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>