Come si ottiene la posizione del cursore in un'area di testo?

Question

Ho una textarea e vorrei sapere se sono sull'ultima riga nella textarea o sulla prima riga nella textarea con il mio cursore con javascript.

Ho pensato di afferrare la posizione del primo carattere di nuova riga e l'ultimo carattere di nuova riga e quindi afferrare la posizione del cursore.

var firstNewline = $('#myTextarea').val().indexOf('\n'); 
var lastNewline = $('#myTextarea').val().lastIndexOf('\n'); 

var cursorPosition = ?????; 

if (cursorPosition < firstNewline) 
    // I am on first line. 
else if (cursorPosition > lastNewline) 
    // I am on last line. 

• E 'possibile per afferrare la posizione del cursore all'interno del textarea?
• Hai un suggerimento migliore per scoprire se sono sulla prima o sull'ultima riga di una textarea?

jQuery soluzioni preferite a meno che javascript sia semplice o più semplice.

Qualsiasi aiuto è molto apprezzato.

Answer 1

Se non è presente alcuna selezione, è possibile utilizzare le proprietà .selectionStart o .selectionEnd (senza selezione sono uguali).

var cursorPosition = $('#myTextarea').prop("selectionStart"); 

Si noti che questo non è supportato nei browser più vecchi, in particolare IE8-. Dovrai lavorare con intervalli di testo, ma è una completa frustrazione.

Credo ci sia una libreria da qualche parte che è dedicata a ottenere e impostare le selezioni/posizioni del cursore in elementi di input, però. Non riesco a ricordare il suo nome, ma sembra che ci siano dozzine di articoli su questo argomento.

Answer 2

Ecco una funzione cross browser che ho nella mia libreria standard:

function getCursorPos(input) { 
    if ("selectionStart" in input && document.activeElement == input) { 
     return { 
      start: input.selectionStart, 
      end: input.selectionEnd 
     }; 
    } 
    else if (input.createTextRange) { 
     var sel = document.selection.createRange(); 
     if (sel.parentElement() === input) { 
      var rng = input.createTextRange(); 
      rng.moveToBookmark(sel.getBookmark()); 
      for (var len = 0; 
        rng.compareEndPoints("EndToStart", rng) > 0; 
        rng.moveEnd("character", -1)) { 
       len++; 
      } 
      rng.setEndPoint("StartToStart", input.createTextRange()); 
      for (var pos = { start: 0, end: len }; 
        rng.compareEndPoints("EndToStart", rng) > 0; 
        rng.moveEnd("character", -1)) { 
       pos.start++; 
       pos.end++; 
      } 
      return pos; 
     } 
    } 
    return -1; 
} 

utilizzare nel proprio codice come questo:

var cursorPosition = getCursorPos($('#myTextarea')[0]) 

Ecco la sua funzione complementare:

function setCursorPos(input, start, end) { 
    if (arguments.length < 3) end = start; 
    if ("selectionStart" in input) { 
     setTimeout(function() { 
      input.selectionStart = start; 
      input.selectionEnd = end; 
     }, 1); 
    } 
    else if (input.createTextRange) { 
     var rng = input.createTextRange(); 
     rng.moveStart("character", start); 
     rng.collapse(); 
     rng.moveEnd("character", end - start); 
     rng.select(); 
    } 
} 

http://jsfiddle.net/gilly3/6SUN8/