Fokus Eingabefeld beim Laden

Wie kann die cursor-Fokus auf ein bestimmtes Eingabefeld beim laden der Seite?

Ist es posible zu behalten anfänglichen text-Wert und stellen Sie den cursor am Ende der Eingabe?

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

InformationsquelleAutor der Frage Codex73 | 2010-12-02

137

Es gibt zwei Teile zu Ihrer Frage.

1), Wie focus-Eingang auf die Seite laden?

Können Sie fügen Sie einfach die autofocus - Attribut zum input.

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

Allerdings kann dies nicht unterstützt werden in allen Browsern, so können wir die javascript verwenden.

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

2) so setzen Sie den cursor an das Ende des input-text?

Hier ist eine nicht-jQuery-Lösung mit einigen geliehen code von eine andere 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 erreichen sollte mit 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>

InformationsquelleAutor der Antwort jessegavin

42

Nur ein heads-up - Sie kann nun mit HTML5 ohne JavaScript für Browser, die es unterstützen:
```
<input type="text" autofocus>
```
Werden Sie wahrscheinlich wollen, um mit diesem zu starten, und bauen auf es mit JavaScript, um eine fallback für ältere Browser.

InformationsquelleAutor der Antwort David Calhoun

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

InformationsquelleAutor der Antwort Nasruddin

Code-snippets:


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

InformationsquelleAutor der Antwort crnlx

2

Einen portablen Weg, dies zu tun ist mit einer benutzerdefinierten Funktion (zur Handhabung von browser-Unterschiede) wie diese eine.

Dann die setup-Routine für die onload am Ende Ihrer <body> tag, als jessegavin schrieb:
```
window.onload = function() {
  document.getElementById("myinputbox").focus();
}
```
InformationsquelleAutor der Antwort Camilo Díaz Repka
1

Wenn Sie können nicht hinzufügen, um den BODY-tag aus irgendeinem Grund, können Sie diese NACH der Form:
```
<SCRIPT type="text/javascript">
    document.yourFormName.yourFieldName.focus();
</SCRIPT>
```
InformationsquelleAutor der Antwort Zardiw

Fein arbeiten...

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

InformationsquelleAutor der Antwort Mohammed Javed

0

Dies ist, was funktioniert gut für mich:
```
<form name="f" action="/search">
    <input name="q" onfocus="fff=1" />
</form>
```
fff wird eine Globale variable, die name ist absolut irrelevant, und das Ziel wird es sein, stoppen die generische onload-Ereignis, Kraft, Fokus, input.
```
<body onload="if(!this.fff)document.f.q.focus();">
    
</body>
```
Aus: http://webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html

InformationsquelleAutor der Antwort Roger

Versuchen:

Javascript Rein:

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

Jquery:

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

InformationsquelleAutor der Antwort KingRider

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.