jQuery establece la posición del cursor en el área de texto
¿Cómo se configura la posición del cursor en un campo de texto usando jQuery? Tengo un campo de texto con contenido y quiero que el cursor de los usuarios se coloque en un cierto desplazamiento cuando se enfocan en el campo. El código debería verse así:
$('#input').focus(function() {
$(this).setCursorPosition(4);
});
¿Cómo sería la implementación de esa función setCursorPosition? Si tuviera un campo de texto con el contenido abcdefg, esta llamada daría como resultado que el cursor se posicionara de la siguiente manera: abcd**|**efg.
Java tiene una función similar, setCaretPosition. ¿Existe un método similar para javascript?
Actualización: modifiqué el código de CMS para que funcione con jQuery de la siguiente manera:
new function($) {
$.fn.setCursorPosition = function(pos) {
if (this.setSelectionRange) {
this.setSelectionRange(pos, pos);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
if(pos < 0) {
pos = $(this).val().length + pos;
}
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
}(jQuery);
Aquí hay una solución jQuery:
$.fn.selectRange = function(start, end) {
if(end === undefined) {
end = start;
}
return this.each(function() {
if('selectionStart' in this) {
this.selectionStart = start;
this.selectionEnd = end;
} else if(this.setSelectionRange) {
this.setSelectionRange(start, end);
} else if(this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};
Con esto puedes hacer
$('#elem').selectRange(3,5); // select a range of text
$('#elem').selectRange(3); // set cursor position
- JsFiddle
- JsBin
Tengo dos funciones:
function setSelectionRange(input, selectionStart, selectionEnd) {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}
function setCaretToPos (input, pos) {
setSelectionRange(input, pos, pos);
}
Entonces puedes usar setCaretToPos así:
setCaretToPos(document.getElementById("YOURINPUT"), 4);
Ejemplo en vivo con a textareay an input, que muestra el uso de jQuery:
Mostrar fragmento de código
A partir de 2016, probado y funcionando en Chrome, Firefox, IE11 e incluso IE8 (consulte este último aquí ; los fragmentos de pila no son compatibles con IE8).
Las soluciones aquí son correctas excepto por el código de extensión jQuery.
La función de extensión debe iterar sobre cada elemento seleccionado y volver thisal encadenamiento de soporte. Aquí está la versión correcta:
$.fn.setCursorPosition = function(pos) {
this.each(function(index, elem) {
if (elem.setSelectionRange) {
elem.setSelectionRange(pos, pos);
} else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
});
return this;
};
Encontré una solución que funciona para mí:
$.fn.setCursorPosition = function(position){
if(this.length == 0) return this;
return $(this).setSelection(position, position);
}
$.fn.setSelection = function(selectionStart, selectionEnd) {
if(this.length == 0) return this;
var input = this[0];
if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
} else if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
return this;
}
$.fn.focusEnd = function(){
this.setCursorPosition(this.val().length);
return this;
}
Ahora puedes mover el foco al final de cualquier elemento llamando:
$(element).focusEnd();
O especificas la posición.
$(element).setCursorPosition(3); // This will focus on the third character.
