wake-up-neo.com

Fokus-Eingabefeld beim Laden

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

Ist es möglich, auch den ursprü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" />
76
Codex73

Ihre Frage besteht aus zwei Teilen.

1) Wie fokussiere ich eine Eingabe beim Laden der Seite?

Sie können einfach das autofocus-Attribut zur Eingabe hinzufügen. 

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

Dies wird jedoch möglicherweise nicht in allen Browsern unterstützt. Daher können Sie Javascript verwenden.

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

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

Hier ist eine Nicht-jQuery-Lösung mit etwas ausgeliehenem Code von einer anderen 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();
}

Hier ein Beispiel, wie ich dies mit jQuery erreichen könnte.

<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>
144
jessegavin

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

<input type="text" autofocus>

Wahrscheinlich möchten Sie damit beginnen und mit JavaScript darauf aufbauen, um einen Fallback für ältere Browser bereitzustellen.

44
David Calhoun
$(document).ready(function() {
    $('#id').focus();
});
10
Nasruddin

Code Ausschnitte:


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" />
3
crnlx

Eine tragbare Methode hierfür ist die Verwendung einer benutzerdefinierten Funktion (um Browser-Unterschiede zu behandeln) wie this .

Dann richten Sie einen Handler für die onload am Ende Ihres <body>-Tags ein, wie jessegavin schrieb:

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

sehr einfache einzeilige Lösung:

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

Funktioniert gut...

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

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

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

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

0
Roger

Versuchen:

Javascript Pure:

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

Jquery:

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