Ottieni la posizione di inserimento nell'input HTML?

28

<!doctype html> 

<html> 
    <head> 
     <meta charset = "utf-8"> 

     <script type = "text/javascript"> 
      window.addEventListener ("load", function() { 
       var input = document.getElementsByTagName ("input"); 

       input[0].addEventListener ("keydown", function() { 
        alert ("Caret position: " + this.selectionStart); 

        // You can also set the caret: this.selectionStart = 2; 
       }); 
      }); 
     </script> 

     <title>Test</title> 
    </head> 

    <body> 
     <input type = "text"> 
    </body> 
</html>

fonte

2011-02-08 02:12:47 Caio

+3

Questo non funziona in IE <= 8. –

+1

Ebbene, l'ascoltatore deve essere registrato su keyup e non gestisce nuove righe (textarea), ma questo fa esattamente ciò che è stato chiesto nei browser moderni. – inta

4

Avevamo usato qualcosa di simile per una vecchia applicazione javascript, ma non ho ancora testato in un paio di anni:

function getCaretPos(input) { 
    // Internet Explorer Caret Position (TextArea) 
    if (document.selection && document.selection.createRange) { 
     var range = document.selection.createRange(); 
     var bookmark = range.getBookmark(); 
     var caret_pos = bookmark.charCodeAt(2) - 2; 
    } else { 
     // Firefox Caret Position (TextArea) 
     if (input.setSelectionRange) 
      var caret_pos = input.selectionStart; 
    } 

    return caret_pos; 
}

fonte

2011-02-08 02:21:29 Pandincus

+1

Sembra essere un 21 caratteri coerente in IE. Con una regolazione sembra bene lì, ma poi è impreciso in FF. [http://jsfiddle.net/zqNpV/](http://jsfiddle.net/zqNpV/) – stoicfury

+0

funziona come un fascino in ie e chrome. –

30

Di seguito li otterranno l'inizio e la fine della selezione come indici di caratteri. Funziona per gli input di testo e le aree di testo ed è leggermente complicato a causa della strana gestione delle interruzioni di riga di IE.

function getInputSelection(el) { 
    var start = 0, end = 0, normalizedValue, range, 
     textInputRange, len, endRange; 

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { 
     start = el.selectionStart; 
     end = el.selectionEnd; 
    } else { 
     range = document.selection.createRange(); 

     if (range && range.parentElement() == el) { 
      len = el.value.length; 
      normalizedValue = el.value.replace(/\r\n/g, "\n"); 

      // Create a working TextRange that lives only in the input 
      textInputRange = el.createTextRange(); 
      textInputRange.moveToBookmark(range.getBookmark()); 

      // Check if the start and end of the selection are at the very end 
      // of the input, since moveStart/moveEnd doesn't return what we want 
      // in those cases 
      endRange = el.createTextRange(); 
      endRange.collapse(false); 

      if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) { 
       start = end = len; 
      } else { 
       start = -textInputRange.moveStart("character", -len); 
       start += normalizedValue.slice(0, start).split("\n").length - 1; 

       if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) { 
        end = len; 
       } else { 
        end = -textInputRange.moveEnd("character", -len); 
        end += normalizedValue.slice(0, end).split("\n").length - 1; 
       } 
      } 
     } 
    } 

    return { 
     start: start, 
     end: end 
    }; 
} 

var textBox = document.getElementById("textBoxId"); 
textBox.focus(); 
alert(getInputSelection(textBox).start);

fonte

2011-02-08 10:34:32

+10

Qualsiasi risposta di Tim Down è la prima che provo. – Justin

+0

@Tim Down sei in grado di creare una risposta usando la tua libreria rangy? – Blowsie

6

ora c'è un bel plugin jQuery per questo: Caret plugin

Poi si può chiamare $("#myTextBox").caret();

fonte

2014-01-29 10:30:03

+0

Aggiornato il link per te –

Ottieni la posizione di inserimento nell'input HTML?

risposta

Problemi correlati