Fokus-Eingabefeld beim Laden

95

Wie kann der Cursor beim Laden der Seite auf ein bestimmtes Eingabefeld fokussiert werden?

Ist es möglich, auch den anfänglichen Textwert beizubehalten und den Cursor am Ende der Eingabe zu platzieren?

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

javascript html dom xhtml Codex73
quelle

170

Ihre Frage besteht aus zwei Teilen.

1) Wie fokussiere ich eine Eingabe auf das Laden von Seiten?

Sie können das autofocusAttribut einfach zur Eingabe hinzufügen .

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

Dies wird jedoch möglicherweise nicht in allen Browsern unterstützt, sodass wir Javascript verwenden können.

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

2) Wie platziere ich den Cursor am Ende des Eingabetextes?

Hier ist eine Nicht-jQuery-Lösung mit geliehenem Code aus einer anderen SO-Antwort .

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();
}

Hier ist ein Beispiel, wie ich dies mit jQuery erreichen würde.

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

3

Der erste vorgeschlagene Codeblock platziert den Cursor tatsächlich auch am Ende des vorhandenen Werts. Er funktioniert einwandfrei. Ich schätze Ihre Hilfe.

Codex73

46

Nur ein Kopf hoch - Sie können dies jetzt mit HTML5 ohne JavaScript für Browser tun, die dies unterstützen:

<input type="text" autofocus>

Sie möchten wahrscheinlich damit beginnen und mit JavaScript darauf aufbauen, um älteren Browsern einen Fallback zu bieten.

David Calhoun
quelle

Gut zu wissen, bewegt dies den Cursor bereits an die letzte Position im Eingabefeld?

Camilo Díaz Repka

1

Ich glaube nicht, dass @ Codex73 versucht, das zu erreichen, was das Platzhalterattribut in HTML5 bewirkt. Es hört sich so an, als ob er möchte, dass der Cursor automatisch am Ende des aktuell in der Eingabe befindlichen Werts positioniert wird.

Jessegavin

2

Sie haben Recht, dies ist keine vollständige Lösung. Dies löst jedoch einige Probleme (Onload-Autofokus und Platzhaltertext).

David Calhoun

Beachten Sie, dass Safari unter iOS dies ab 1/2019

sporker

11

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

Nasruddin
quelle

1

Dies erfordert jQuery.

Tom Pohl

1

Ja, Sie müssen jQuery libs einschließen :)

Nasruddin

klassischer 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
quelle

2

Eine tragbare Möglichkeit hierfür ist die Verwendung einer benutzerdefinierten Funktion (zur Behandlung von Browserunterschieden) wie dieser .

Richten Sie dann einen Handler für das onloadam Ende Ihres <body>Tags ein, wie Jessegavin schrieb:

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

Camilo Díaz Repka
quelle

1

Funktioniert gut...

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

Mohammed Javed
quelle

1

sehr einfache einzeilige Lösung:

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

kavi
quelle

0

Das funktioniert gut für mich:

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

fff ist eine globale Variable, deren Name absolut irrelevant ist und deren Ziel es ist, das generische Onload-Ereignis zu stoppen, um den Fokus in dieser Eingabe zu erzwingen.

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

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

Roger
quelle

0

Wenn Sie aus irgendeinem Grund nicht zum BODY-Tag hinzufügen können, können Sie dies NACH dem Formular hinzufügen:

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

Zardiw
quelle

0

Versuchen:

Javascript Pure:

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

Jquery:

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

KingRider
quelle

0

Fügen Sie dies oben auf Ihrem js hinzu

var input = $('#myinputbox');

input.focus();

Oder zu HTML

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

    input.focus();
</script>

Marty
quelle

Fokus-Eingabefeld beim Laden

Antworten: