जावास्क्रिप्ट: Chromearea.setSelectionRange का उपयोग करने के बाद चयन करने के लिए स्क्रॉल करें क्रोम में

Question

एक जावास्क्रिप्ट फ़ंक्शन .setSelectionRange() का उपयोग करके टेक्स्टरेरा में एक निश्चित शब्द का चयन करता है। फ़ायरफ़ॉक्स में, टेक्स्टरेरा स्वचालित रूप से चयनित टेक्स्ट दिखाने के लिए नीचे स्क्रॉल करता है। क्रोम में (v14), यह नहीं है। क्या क्रोम को टेक्स्टएरा को नए चुने हुए पाठ पर स्क्रॉल करने का कोई तरीका है? 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; 

एक समारोह में इस रखो, इसके साथ जावास्क्रिप्ट का तत्व वस्तु के प्रोटोटाइप का विस्तार, और आप अच्छा कर रहे हैं।

यह पूछने के लिए स्वतंत्र महसूस करें कि आपको और सहायता चाहिए या नहीं।

Answer 2

आप देख सकते हैं कि हमने in ProveIt समस्या को हल किया है (देखें LightLengthAtIndex)। असल में, चाल textarea को छोटा करने के लिए है, अंत तक स्क्रॉल करें, फिर पाठ के दूसरे भाग को पुनर्स्थापित करें। हमने निरंतर क्रॉस-ब्राउज़र व्यवहार के लिए टेक्स्ट चयन प्लगइन का भी उपयोग किया।

Answer 3

मैं यहाँ एक जवाब प्रकाशित:

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

यह सिर्फ एक जरूरत शासन के साथ पूरी तरह से काम करता है: पंक्ति-ऊंचाई n पाठ क्षेत्र के सीएसएस सेट करें!

यह कुछ सरल गणितीय गणना करके स्क्रॉल करने के लिए शब्द की स्थिति की गणना करता है और यह मेरे सभी प्रयोगों में पूरी तरह से काम करता है!

मुझे कोड के बारे में कुछ भी पूछने के लिए स्वतंत्र महसूस करें!

Answer 4

यह मैथ्यू फ्लैंचन के 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 

वर एसएआर = {};

  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>