Wie wird ein Fokus auf ein Textfeld zurückgesetzt, wenn der Fokus auf einem HTML-Formular verloren geht?

Question

Es gibt nur ein Textfeld in einem HTML-Formular. Benutzer geben einen Text ein, drücken die Eingabetaste, senden das Formular und das Formular wird erneut geladen. Die Hauptanwendung ist das Lesen von Barcodes. Ich verwende den folgenden Code, um den Fokus auf das Textfeld zu setzen:

<script language="javascript"> 
    <!-- 
      document.getElementById("#{id}").focus() 
    //--> 
</script> 

Es meiste Zeit funktioniert (wenn niemand berührt den Bildschirm/Maus/Tastatur).

Wenn der Benutzer jedoch irgendwo außerhalb des Feldes innerhalb des Browserfensters (der weiße leere Bereich) klickt, ist der Cursor verschwunden. Wie kann ich verhindern, dass der Cursor verloren geht? Oder, wie den Cursor innerhalb des Feldes neu zu fokussieren, nachdem der Cursor verloren gegangen ist? Danke!

Answer 1

Darin Antwort ist richtig, aber funktioniert nicht in Firefox. Wenn Sie Fokus wieder in Firefox stehlen wollen, müssen Sie es erst nach dem Ereignis verzögern:

<input onblur="var that= this; setTimeout(function() { that.focus(); }, 0);"> 

Oder besser, von JavaScript zugeordnet:

<script type="text/javascript"> 
    var element= document.getElementById('foo'); 
    element.focus(); 
    element.onblur= function() { 
     setTimeout(function() { 
      element.focus(); 
     }, 0); 
    }; 
</script> 

Aber würde ich dringend raten Sie tun dies nicht. Wenn Sie außerhalb eines Textfelds klicken, um den Fokus aus diesem Textfeld zu entfernen, ist dies ein ganz normales Verhalten des Browsers, das von rechtem Nutzen sein kann (z. B. um den Suchpunkt für Strg-F festzulegen oder eine Ziehen-Auswahl zu starten). Es ist sehr unwahrscheinlich, dass es einen guten Grund gibt, sich mit diesem erwarteten Verhalten zu messen.

Answer 2

Sie können das Ereignis blur haken und das Feld erneut fokussieren. Es gibt nur sehr wenige Anwendungsfälle dafür, aber es klingt so, als wäre Ihre eine davon. Beachten Sie, dass Sie den Neufokus wahrscheinlich über setTimeout oder ähnlich planen müssen. Sie können dies nicht innerhalb des blur Handlers selbst tun.

Wenn dies tun, ohne das Markup zu beeinflussen, das ist am einfachsten, wenn Sie eine Bibliothek wie Prototype verwenden, jQuery, Closure, etc., aber Sie können es tun, ohne sie (natürlich), müssen Sie nur sich selbst Browser behandeln Unterschiede . Zum Beispiel mit Prototype:

document.observe("dom:loaded", function() { 
    var elm = $('thingy'); 

    elm.focus(); 
    elm.observe('blur', function() { 
     refocus.defer(elm); 
    }); 

    function refocus(elm) { 
     elm.focus(); 
    } 
}); 

Wenn Sie nichts dagegen haben das Markup zu beeinflussen, können Sie das onblur Attribut verwenden. Zum Beispiel, das funktioniert auf IE, Firefox und Chrome mindestens (wahrscheinlich andere):

HTML:

<input type='text' id='thingy' onblur="refocus(this);"> 

Script:

function refocus(elm) { 

    setTimeout(go, 0); 

    function go() { 
     elm.focus(); 
    } 
} 

Answer 3

<input type="text" name="barcode" onblur="this.focus();" />