Comment le curseur peut-il être mis au point sur une zone de saisie spécifique lors du chargement de la page?Zone de saisie de mise au point en cours de chargement
Est-il également possible de conserver la valeur de texte initiale et de placer le curseur à la fin de l'entrée?
<input type="text" size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" />
Votre question comporte deux parties.
1) Comment effectuer une mise au point sur le chargement d'une page?
Vous pouvez simplement ajouter l'attribut autofocus à l'entrée.
<input id="myinputbox" type="text" autofocus>
Cependant, cela peut ne pas être pris en charge dans tous les navigateurs, nous pouvons donc utiliser javascript.
window.onload = function() {
var input = document.getElementById("myinputbox").focus();
}
2) Comment placer le curseur à la fin du texte d'entrée?
Voici une solution non-jQuery avec un code emprunté de another SO answer.
function placeCursorAtEnd() {
if (this.setSelectionRange) {
// Double the length because Opera is inconsistent about
// whether a carriage return is one character or two.
var len = this.value.length * 2;
this.setSelectionRange(len, len);
} else {
// This might work for browsers without setSelectionRange support.
this.value = this.value;
}
if (this.nodeName === "TEXTAREA") {
// This will scroll a textarea to the bottom if needed
this.scrollTop = 999999;
}
};
window.onload = function() {
var input = document.getElementById("myinputbox");
if (obj.addEventListener) {
obj.addEventListener("focus", placeCursorAtEnd, false);
} else if (obj.attachEvent) {
obj.attachEvent('onfocus', placeCursorAtEnd);
}
input.focus();
}
Voici un exemple de la façon dont j'accomplirais cela avec jQuery.
<input type="text" autofocus>
<script>
$(function() {
$("[autofocus]").on("focus", function() {
if (this.setSelectionRange) {
var len = this.value.length * 2;
this.setSelectionRange(len, len);
} else {
this.value = this.value;
}
this.scrollTop = 999999;
}).focus();
});
</script>
extraits de code:
function focusOnMyInputBox(){
document.getElementById("myinputbox").focus();
}
<body onLoad="focusOnMyInputBox()")>
<input type="text" size="25" id="myinputbox" class="input-text" name="input2" onfocus="this.value = this.value;" value = "initial text" />
Une façon portable de faire est d'utiliser une fonction personnalisée (pour gérer les différences de navigateur) comme this one.
configuration Puis un gestionnaire pour l'onload à la fin de votre balise <body>, comme jessegavin a écrit:
window.onload = function() {
document.getElementById("myinputbox").focus();
}
Juste un heads-up - vous pouvez le faire avec HTML5 sans JavaScript pour navigateurs qui prennent en charge:
<input type="text" autofocus>
Vous voulez probablement commencer avec cela et construire sur elle avec JavaScript afin de fournir une solution de repli pour les anciens navigateurs.
Bon à savoir, est-ce que cela déplace déjà le curseur à la dernière position dans le champ de saisie? –
Je ne pense pas que @ Codex73 essaie d'accomplir ce que fait l'attribut placeholder dans HTML5. On dirait qu'il veut que le curseur soit positionné automatiquement à la fin de la valeur qui est actuellement dans l'entrée. – jessegavin
Vous avez raison, ce n'est pas une solution complète. Mais cela résout un certain nombre de choses (autofocus onload et texte de l'espace réservé). –
$(document).ready(function() {
$('#id').focus();
});
Cela nécessite jQuery. –
Oui, vous devez inclure les librairies jQuery :) – Nasruddin
C'est ce qui fonctionne bien pour moi:
<form name="f" action="/search">
<input name="q" onfocus="fff=1" />
</form>
fff sera une variable globale dont le nom est tout à fait hors de propos et qui l'objectif sera d'arrêter l'événement onload générique pour forcer l'accent sur cette entrée .
<body onload="if(!this.fff)document.f.q.focus();">
<!-- ... the rest of the page ... -->
</body>
De: http://webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html
Si vous ne pouvez pas ajouter à la balise BODY pour une raison quelconque, vous pouvez ajouter cette fois le formulaire:
<SCRIPT type="text/javascript">
document.yourFormName.yourFieldName.focus();
</SCRIPT>
fonctionne bien ...
window.onload = function() {
var input = document.getElementById("myinputbox").focus();
}
Essayez:
Javascript pur:
[elem][n].style.visibility='visible';
[elem][n].focus();
Jquery:
[elem].filter(':visible').focus();
Le premier bloc de code proposé fait pla le curseur à la fin de la valeur existante aussi, cela fonctionne bien. J'apprécie votre aide. – Codex73