2009-03-09 4 views
3

Ich versuche, das folgende Verhalten in HTML zu erreichen: Benutzer wird mit einem Formular mit mehreren Textfeldern dargestellt. Die Felder sind mit Standardwerten gefüllt, aber in vielen Fällen möchte der Benutzer ihre eigenen eingeben. Wenn die Seite geladen wird, wird der Wert im ersten Feld ausgewählt, sodass der Benutzer sie entweder ersetzen kann, indem er einfach mit dem Eingeben und Tabulatoring zum nächsten Feld beginnt, oder einfach das Tabulatortaste leer lassen. Hier ist eine abgespeckte Beispiel dafür, was ich habe:Tab Reihenfolge Problem in IE mit anfänglicher Javascript Auswahl von Feld in Formular

<html> 
    <body onload="document.getElementById('helloField').select()"> 
     <form> 
      <input id="helloField" value="hello"/><br/> 
      <input value="goodbye"/><br/> 
      <input type="submit" value="Submit"/> 
     </form> 
    </body> 
</html> 

Dies funktioniert in Chrome (und Firefox glaube ich, aber ich es hier nicht haben). In IE wird das Feld wie beabsichtigt ausgewählt, aber wenn der Benutzer auf die Registerkarte klickt, wird der Browser in die Adresszeile und nicht in das Feld "Auf Wiedersehen" verschoben. Wenn ich die select mit einem einfachen Fokus ersetzen, wie

<body onload="document.getElementById('helloField').focus()"> 

ist die Navigation mit der Tabulatortaste in allen Browsern in Ordnung, aber das ist nicht das, was ich will. Ich möchte, dass der Benutzer sofort mit der Eingabe beginnen kann, um den Standardwert zu ersetzen.

Wer hat irgendwelche Ideen?

Danke.

Antwort

6

Fokus, dann wählen.

Denken Sie auch daran, den Code direkt nach der Eingabe in einen Skriptblock zu schreiben. Wenn Sie eine Reihe von Bildern auf der Seite haben, kann document.onload viel später ausgelöst werden, und das letzte, was Sie wollen, ist, in ein Eingabefeld zu tippen, wenn onload Ihren Fokus auslöst und ausliest (Sie löschen den Inhalt von die Kiste).

<input id="helloField" value="hello"/><br/> 
<script type="text/javascript"> 
    var hello= document.getElementById('helloField'); 
    hello.focus(); 
    hello.select(); 
</script> 
1

Probieren Sie die Registerkarte Reihenfolge der Felder Einstellung tabindex mit:

<html> 
    <body onload="document.getElementById('helloField').select()"> 
     <form> 
      <input id="helloField" value="hello" tabindex="1" /><br/> 
      <input value="goodbye" tabindex="2" /><br/> 
      <input type="submit" value="Submit" tabindex="3" /> 
     </form> 
    </body> 
</html> 
+0

Leider hat das nicht funktioniert. – jjujuma