¿Obtiene la posición de intercalación en la entrada de 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>

Fuente

2011-02-08 02:12:47 Caio

+3

Esto no funciona en IE <= 8. –

+1

Bueno, el oyente debe ser registrado en keyup y no maneja nuevas líneas (textarea), pero esto hace exactamente lo que se solicitó en los navegadores modernos. – inta

4

Habíamos usado algo como esto para una aplicación antigua javascript, pero no lo hemos probado en un par de años:

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

Fuente

2011-02-08 02:21:29 Pandincus

+1

Parece ser un consistente 21 caracteres desactivados en IE. Con un ajuste parece estar bien allí, pero luego es inexacto en FF. [http://jsfiddle.net/zqNpV/](http://jsfiddle.net/zqNpV/) – stoicfury

+0

funciona como un encanto en ie y cromo. –

30

A continuación le conseguirá el inicio y el final de la selección como índices de caracteres. Funciona para entradas de texto y áreas de texto, y es un poco complicado debido al extraño manejo de saltos de línea de 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);

Fuente

2011-02-08 10:34:32

+10

Cualquier respuesta de Tim Down es la primera que intento. – Justin

+0

@Tim Down ¿eres capaz de crear una respuesta usando tu biblioteca rangy? – Blowsie

6

Ahora hay un buen plugin de jQuery para esto: Caret plugin

A continuación, puede simplemente llamar $("#myTextBox").caret();

Fuente

2014-01-29 10:30:03

+0

Se ha actualizado el enlace por usted –

¿Obtiene la posición de intercalación en la entrada de HTML?

Respuesta

Cuestiones relacionadas