JavaScript : Chrome에서 textarea.setSelectionRange를 사용한 후 선택 항목으로 스크롤

Question

자바 스크립트 함수는 .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; 

는, 그것으로 자바 스크립트의 요소 객체의 프로토 타입을 확장, 당신은 좋은거야.

추가 도움이 필요하면 언제든지 문의하십시오.

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

그것은 jsut 하나 필요한 규칙과 완벽하게 작동합니다 :

Answer 2

우리는 문제를 어떻게 해결했는지 볼 수 있습니다 in ProveIt (highlightLengthAtIndex 참조). 기본적으로 트릭은 텍스트 영역을 잘라내어 끝까지 스크롤 한 다음 텍스트의 두 번째 부분을 복원하는 것입니다. 일관된 브라우저 간 동작을 위해 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; 
    } 
} 

기본적 트릭은 텍스트 영역을 절단 끝으로 이동 한 다음 두 번째 텍스트 부분을 복원하는 것이다.

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>