Définissez le focus de la souris et déplacez le curseur à la fin de la saisie à l'aide de jQuery
Cette question a été posée sous différents formats, mais je ne parviens pas à obtenir la moindre réponse dans mon scénario.
J'utilise jQuery pour implémenter l'historique des commandes lorsque l'utilisateur appuie sur les flèches haut/bas. Lorsque la flèche vers le haut est atteinte, je remplace la valeur d'entrée par la commande précédente et active le champ de saisie, mais je souhaite que le curseur soit toujours positionné à la fin de la chaîne d'entrée.
Mon code, tel quel:
$(document).keydown(function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
var input = self.Shell.find('input.current:last');
switch(key) {
case 38: // up
lastQuery = self.queries[self.historyCounter-1];
self.historyCounter--;
input.val(lastQuery).focus();
// and it continues on from there
Comment puis-je forcer le curseur à être placé à la fin de 'entrée' après la mise au point?
On dirait que la valeur est effacée après la mise au point, puis la réinitialisation des travaux.
input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);
Cela semble un peu bizarre, voire idiot, mais cela fonctionne pour moi:
input.val(lastQuery);
input.focus().val(input.val());
Maintenant, je ne suis pas sûr d'avoir répliqué votre configuration. Je suppose que input est un élément <input>.
En réinitialisant la valeur (sur lui-même), je pense que le curseur se met à la fin de l'entrée. Testé dans Firefox 3 et MSIE7.
J'espère que cela vous aidera:
var fieldInput = $('#fieldName');
var fldLength= fieldInput.val().length;
fieldInput.focus();
fieldInput[0].setSelectionRange(fldLength, fldLength);
Qu'en est-il en une seule ligne ...
$('#txtSample').focus().val($('#txtSample').val());
Cette ligne fonctionne pour moi.
2 artlung 's' answer: Cela fonctionne avec la deuxième ligne uniquement dans mon code (IE7, IE8; Jquery v1.6):
var input = $('#some_elem');
input.focus().val(input.val());
Addition: Si l'élément input a été ajouté à DOM à l'aide de JQuery, la focalisation n'est pas définie dans IE. J'ai utilisé un petit truc:
input.blur().focus().val(input.val());
Chris Coyier a pour cela un mini plugin jQuery qui fonctionne parfaitement: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input /
Il utilise setSelectionRange si pris en charge, sinon a un repli solide.
jQuery.fn.putCursorAtEnd = function() {
return this.each(function() {
$(this).focus()
// If this function exists...
if (this.setSelectionRange) {
// ... then use it (Doesn't work in IE)
// Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
var len = $(this).val().length * 2;
this.setSelectionRange(len, len);
} else {
// ... otherwise replace the contents with itself
// (Doesn't work in Google Chrome)
$(this).val($(this).val());
}
// Scroll to the bottom, in case we're in a tall textarea
// (Necessary for Firefox and Google Chrome)
this.scrollTop = 999999;
});
};
Ensuite, vous pouvez simplement faire:
input.putCursorAtEnd();
Je sais que cette réponse arrive en retard, mais je peux voir que les gens n’ont pas trouvé de réponse. Pour empêcher la touche haut de mettre le curseur au début, il suffit de return false de la méthode qui gère l'événement. Cela arrête la chaîne d'événements qui mène au mouvement du curseur. Coller le code révisé de l'OP ci-dessous:
$(document).keydown(function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
var input = self.Shell.find('input.current:last');
switch(key) {
case 38: // up
lastQuery = self.queries[self.historyCounter-1];
self.historyCounter--;
input.val(lastQuery).focus();
// HERE IS THE FIX:
return false;
// and it continues on from there
Ref: @ will824 Commentaire, cette solution a fonctionné pour moi sans aucun problème de compatibilité. Le reste des solutions a échoué dans IE9.
var input = $("#inputID");
tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
Testé et trouvé travaillant dans:
Firefox 33
Chrome 34
Safari 5.1.7
IE 9
J'utilise le code ci-dessous et cela fonctionne bien
function to_end(el) {
var len = el.value.length || 0;
if (len) {
if ('setSelectionRange' in el) el.setSelectionRange(len, len);
else if ('createTextRange' in el) {// for IE
var range = el.createTextRange();
range.moveStart('character', len);
range.select();
}
}
}
Ce sera différent pour différents navigateurs:
Cela fonctionne dans ff:
var t =$("#INPUT");
var l=$("#INPUT").val().length;
$(t).focus();
var r = $("#INPUT").get(0).createTextRange();
r.moveStart("character", l);
r.moveEnd("character", l);
r.select();
Plus de détails sont dans ces articles ici SitePoint , AspAlliance .
comme d’autres dit, clear and fill a fonctionné pour moi:
var elem = $('#input_field');
var val = elem.val();
elem.focus().val('').val(val);
Au début, vous devez définir le focus sur l'objet de zone de texte sélectionné, puis la valeur.
$('#inputID').focus();
$('#inputID').val('someValue')
définir la valeur en premier. puis définissez le focus. lorsqu’il effectue la mise au point, il utilisera la valeur existante au moment de la mise au point; votre valeur doit donc être définie en premier.
cette logique fonctionne pour moi avec une application qui remplit un <input> avec la valeur d'un <button> cliqué. val() est défini en premier. alors focus()
$('button').on('click','',function(){
var value = $(this).attr('value');
$('input[name=item1]').val(value);
$('input[name=item1]').focus();
});
J'ai trouvé la même chose que suggéré ci-dessus par quelques personnes. Si vous commencez par focus(), appuyez ensuite sur val() dans l'entrée, le curseur se positionnera à la fin de la valeur d'entrée dans Firefox, Chrome et IE. Si vous appuyez d'abord sur val() dans le champ de saisie, Firefox et Chrome positionnent le curseur à la fin, mais IE le positionne au premier plan lorsque vous focus().
$('element_identifier').focus().val('some_value')
devrait faire l'affaire (il a toujours pour moi de toute façon).
function focusCampo(id){
var inputField = document.getElementById(id);
if (inputField != null && inputField.value.length != 0){
if (inputField.createTextRange){
var FieldRange = inputField.createTextRange();
FieldRange.moveStart('character',inputField.value.length);
FieldRange.collapse();
FieldRange.select();
}else if (inputField.selectionStart || inputField.selectionStart == '0') {
var elemLen = inputField.value.length;
inputField.selectionStart = elemLen;
inputField.selectionEnd = elemLen;
inputField.focus();
}
}else{
inputField.focus();
}
}
$('#urlCompany').focus(focusCampo('urlCompany'));
fonctionne pour tous les navigateurs, c.-à-d.
En voici une autre, une ligne qui ne réaffecte pas la valeur:
$("#inp").focus()[0].setSelectionRange(99999, 99999);
function CurFocus()
{
$('.txtEmail').focus();
}
function pageLoad()
{
setTimeout(CurFocus(),3000);
}
window.onload = pageLoad;
La réponse de scorpion9 fonctionne. Pour que ce soit plus clair, voir mon code ci-dessous,
<script src="~/js/jquery.js"></script>
<script type="text/javascript">
$(function () {
var input = $("#SomeId");
input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);
});
</script>