Focus Input Box On Load

95

Come può il cursore essere focalizzato su una specifica casella di input durante il caricamento della pagina?

È possibile mantenere anche il valore del testo iniziale e posizionare il cursore alla fine dell'input?

<input type="text"  size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" />

— Codex73
fonte

170

Ci sono due parti della tua domanda.

1) Come concentrare un input sul caricamento della pagina?

Puoi semplicemente aggiungere l' autofocusattributo all'input.

<input id="myinputbox" type="text" autofocus>

Tuttavia, questo potrebbe non essere supportato in tutti i browser, quindi possiamo usare javascript.

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

2) Come posizionare il cursore alla fine del testo inserito?

Ecco una soluzione non jQuery con del codice preso in prestito da un'altra risposta 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();
}

Ecco un esempio di come lo farei con 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>

— jessegavin
fonte

3

Il primo blocco di codice suggerito in realtà posiziona il cursore anche alla fine del valore esistente, funziona bene. Apprezzo il tuo aiuto.

— Codex73

46

Solo un avvertimento: ora puoi farlo con HTML5 senza JavaScript per i browser che lo supportano:

<input type="text" autofocus>

Probabilmente vorrai iniziare con questo e costruirlo con JavaScript per fornire un fallback per i browser meno recenti.

— David Calhoun
fonte

Bello sapere, questo sposta già il cursore nell'ultima posizione nel campo di immissione?

— Camilo Díaz Repka

1

Non penso che @ Codex73 stia cercando di realizzare ciò che fa l'attributo segnaposto in HTML5. Sembra che voglia che il cursore venga posizionato automaticamente alla fine di qualsiasi valore sia attualmente inserito.

— jessegavin

2

Hai ragione, questa non è una soluzione completa. Ma questo risolve un paio di cose (autofocus in caricamento e testo segnaposto).

— David Calhoun

Tieni presente che a partire dal 1/2019, Safari su iOS non supporta questo: caniuse.com/#feat=autofocus

— sporker

11

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

— Nasruddin
fonte

1

Ciò richiede jQuery.

— Tom Pohl

1

Sì, devi includere 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
fonte

2

Un modo portatile per farlo è usare una funzione personalizzata (per gestire le differenze del browser) come questa .

Quindi imposta un gestore per il onloadalla fine del tuo <body>tag, come ha scritto jessegavin:

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

— Camilo Díaz Repka
fonte

1

Funziona bene ...

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

— Mohammed Javed
fonte

1

soluzione molto semplice di una riga:

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

— kavi
fonte

0

Questo è ciò che funziona bene per me:

<form name="f" action="/search">
    <input name="q" onfocus="fff=1" />
</form>

fff sarà una variabile globale il cui nome è assolutamente irrilevante e il cui scopo sarà fermare l'evento generico onload per forzare il focus in quell'input.

<body onload="if(!this.fff)document.f.q.focus();">
    <!-- ... the rest of the page ... -->
</body>

Da: http://webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html

— Roger
fonte

0

Se per qualche motivo non puoi aggiungere al tag BODY, puoi aggiungerlo DOPO il modulo:

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

— Zardiw
fonte

0

Provare:

Javascript Pure:

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

Jquery:

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

— KingRider
fonte

0

Aggiungi questo all'inizio del tuo js

var input = $('#myinputbox');

input.focus();

O in html

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

    input.focus();
</script>

— Marty
fonte