javascript - ejemplos - Obtener la posición del cursor(en caracteres) dentro de un campo de entrada de texto
jquery selector (8)
¿Cómo puedo obtener la posición de intercalación desde dentro de un campo de entrada?
He encontrado algunas partes y piezas a través de Google, pero nada a prueba de balas.
Básicamente, algo así como un plugin jQuery sería ideal, así que simplemente podría hacer
$("#myinput").caretPosition()
MUY FÁCIL
Respuesta actualizada
Simplemente use selectionStart , es compatible con todos los principales navegadores .
document.getElementById(''foobar'').addEventListener(''keyup'', e => {
console.log(''Caret at: '', e.target.selectionStart)
})
<input id="foobar" />
Agradable, muchas gracias a Max.
Envolví la funcionalidad de su respuesta en jQuery si alguien quiere usarla.
(function($) {
$.fn.getCursorPosition = function() {
var input = this.get(0);
if (!input) return; // No (input) element found
if (''selectionStart'' in input) {
// Standard-compliant browsers
return input.selectionStart;
} else if (document.selection) {
// IE
input.focus();
var sel = document.selection.createRange();
var selLen = document.selection.createRange().text.length;
sel.moveStart(''character'', -input.value.length);
return sel.text.length - selLen;
}
}
})(jQuery);
Ahora hay un buen complemento para esto: el complemento Caret
Luego puede obtener el puesto usando $("#myTextBox").caret() o configurarlo a través de $("#myTextBox").caret(position)
Aquí se publican algunas buenas respuestas, pero creo que puede simplificar su código y omitir la comprobación del soporte de inputElement.selectionStart : no solo es compatible con IE8 y versiones anteriores (consulte la documentation ), que representa menos del 1% del navegador actual. uso .
var input = document.getElementById(''myinput''); // or $(''#myinput'')[0]
var caretPos = input.selectionStart;
// and if you want to know if there is a selection or not inside your input:
if (input.selectionStart != input.selectionEnd)
{
var selectionValue =
input.value.substring(input.selectionStart, input.selectionEnd);
}
Quizás necesite un rango seleccionado además de la posición del cursor. Aquí hay una función simple, ni siquiera necesita jQuery:
function caretPosition(input) {
var start = input[0].selectionStart,
end = input[0].selectionEnd,
diff = end - start;
if (start >= 0 && start == end) {
// do cursor position actions, example:
console.log(''Cursor Position: '' + start);
} else if (start >= 0) {
// do ranged select actions, example:
console.log(''Cursor Position: '' + start + '' to '' + end + '' ('' + diff + '' selected chars)'');
}
}
Digamos que quieres llamarlo a una entrada cada vez que cambia o el mouse mueve la posición del cursor (en este caso estamos usando jQuery .on() ). Por motivos de rendimiento, puede ser una buena idea agregar setTimeout() o algo así como Underscores _debounce() si los eventos se están vertiendo:
$(''input[type="text"]'').on(''keyup mouseup mouseleave'', function() {
caretPosition($(this));
});
Aquí hay un violín si quieres probarlo: https://jsfiddle.net/Dhaupin/91189tq7/
Tengo una solución muy simple . Pruebe el siguiente código con resultado verificado -
<html>
<head>
<script>
function f1(el) {
var val = el.value;
alert(val.slice(0, el.selectionStart).length);
}
</script>
</head>
<body>
<input type=text id=t1 value=abcd>
<button onclick="f1(document.getElementById(''t1''))">check position</button>
</body>
</html>
Te estoy dando el fiddle_demo
Actualización más fácil:
Use field.selectionStart example en esta respuesta .
Gracias a @commonSenseCode por señalar esto.
Respuesta anterior:
Encontré esta solución. No está basado en jquery, pero no hay problema para integrarlo en jquery:
/*
** Returns the caret (cursor) position of the specified text field.
** Return value range is 0-oField.value.length.
*/
function doGetCaretPosition (oField) {
// Initialize
var iCaretPos = 0;
// IE Support
if (document.selection) {
// Set focus on the element
oField.focus();
// To get cursor position, get empty selection range
var oSel = document.selection.createRange();
// Move selection start to 0 position
oSel.moveStart(''character'', -oField.value.length);
// The caret position is selection length
iCaretPos = oSel.text.length;
}
// Firefox support
else if (oField.selectionStart || oField.selectionStart == ''0'')
iCaretPos = oField.selectionStart;
// Return results
return iCaretPos;
}
(function($) {
$.fn.getCursorPosition = function() {
var input = this.get(0);
if (!input) return; // No (input) element found
if (document.selection) {
// IE
input.focus();
}
return ''selectionStart'' in input ? input.selectionStart:'''' || Math.abs(document.selection.createRange().moveStart(''character'', -input.value.length));
}
})(jQuery);