Focus Input Box On Load

95

Comment le curseur peut-il se concentrer sur une zone de saisie spécifique lors du chargement de la page?

Est-il possible de conserver également la valeur initiale du texte 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" />

javascript html dom xhtml Codex73
la source

170

Votre question comporte deux volets.

1) Comment focaliser une entrée sur le chargement de la page?

Vous pouvez simplement ajouter l' autofocusattribut à 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 du code emprunté à une autre réponse SO .

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>

Jességavin
la source

3

Le premier bloc de code suggéré place également le curseur à la fin de la valeur existante, cela fonctionne bien. J'apprécie votre aide.

Codex73

46

Attention, vous pouvez maintenant le faire avec HTML5 sans JavaScript pour les navigateurs qui le prennent en charge:

<input type="text" autofocus>

Vous voudrez probablement commencer par cela et développer avec JavaScript pour fournir une solution de secours aux anciens navigateurs.

David Calhoun
la source

C'est bien de savoir que cela déplace déjà le curseur à la dernière position dans le champ de saisie?

Camilo Díaz Repka

1

Je ne pense pas que @ Codex73 essaie d'accomplir ce que fait l'attribut d'espace réservé dans HTML5. On dirait qu'il veut que le curseur soit automatiquement positionné à la fin de la valeur actuellement présente dans l'entrée.

jessegavin

2

Vous avez raison, ce n'est pas une solution complète. Mais cela résout un certain nombre de choses (mise au point automatique et texte d'espace réservé).

David Calhoun

Notez qu'à partir du 1/2019, Safari sur iOS ne prend pas en charge ceci: caniuse.com/#feat=autofocus

sporker

11

$(document).ready(function() {
    $('#id').focus();
});

Nasruddin
la source

1

Cela nécessite jQuery.

Tom Pohl

1

Ouais, vous devez inclure jQuery libs :)

Nasruddin

classic stackoverflow :)

Florian Fida

3

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">

crnlx
la source

2

Une façon portable de faire cela consiste à utiliser une fonction personnalisée (pour gérer les différences de navigateur) comme celle-ci .

Ensuite, configurez un gestionnaire pour le onloadà la fin de votre <body>balise, comme jessegavin l'a écrit:

window.onload = function() {
  document.getElementById("myinputbox").focus();
}

Camilo Díaz Repka
la source

1

Marche bien ...

window.onload = function() {
  var input = document.getElementById("myinputbox").focus();
}

Mohammed Javed
la source

1

solution très simple en une ligne:

<body onLoad="document.getElementById('myinputbox').focus();">

kavi
la source

0

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 n'est absolument pas pertinent et dont le but sera d'arrêter l'événement générique onload pour forcer le focus dans 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

Roger
la source

0

Si vous ne pouvez pas ajouter à la balise BODY pour une raison quelconque, vous pouvez l'ajouter APRÈS le formulaire:

<SCRIPT type="text/javascript">
    document.yourFormName.yourFieldName.focus();
</SCRIPT>

Zardiw
la source

0

Essayer:

Javascript pur:

[elem][n].style.visibility='visible';
[elem][n].focus();

Jquery:

[elem].filter(':visible').focus();

KingRider
la source

0

Ajoutez ceci en haut de votre js

var input = $('#myinputbox');

input.focus();

Ou en html

<script>
    var input = $('#myinputbox');

    input.focus();
</script>

Marty
la source

Focus Input Box On Load

Réponses: