jQuery-Fokusfunktion funktioniert nicht in Firefox

Question

Der folgende Codeabschnitt konzentriert die Texteingabe, nachdem Sie auf den Link geklickt haben. Es funktioniert gut für Chrome 2.x, IE8 und Opera 9.64, aber nicht für Firefox 3.0.9. Die Texteingabe blinkt schnell in Firefox und verschwindet dann, ich arbeite gerade an Windows XP SP2.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script> 
$(document).ready(function() 
{ 
    $("a").click(function() { 
     var field_id = $(this).attr("href"); 
     $(field_id).focus(); 
    }); 
}); 
</script> 

<a href="#text_field">Focus</a> 
<input type="text" name="text_field" id="text_field" /> 

Kann jemand das oben in Firefox behandeln?

Answer 1

Ich weiß nicht, ob Sie das wollen. Um den Fokus auf den Eingang legen Klick auf den label können Sie dies tun:

<label for="text_field">Label</label> 
<input type="text" name="text_field" id="text_field" /> 

ODER

<label>Label 
<input type="text" name="text_field" id="text_field" /> 
</label> 

Answer 2

Zusätzlich zu den beiden anderen Antworten ist der Grund, Ihren Weg nicht funktioniert, weil der Wert von Das href-Feld ist normalerweise vollständig mit der URL qualifiziert (dies hängt vom Browser ab und jQuery abstrahiert es nicht).

Wenn Sie also ein href "#text_field" haben, können Sie den tatsächlichen Wert des Feldes "http://localhost/#text_field" finden, weshalb es nicht mit Ihrem Muster übereinstimmt.

Daniels Vorschlag mit Etiketten und "für" Attribute ist eine gute Lösung, wenn Sie sich auf Felder konzentrieren möchten.

Answer 3

Ich denke, dass dieser Fehler in FF auftritt, weil nach dem Klicken auf den Link die Click Callback ausgeführt wird und danach öffnet die Seite # Textfeld. Sie können versuchen:

Auf diese Weise gibt es keinen Link und wird nicht eine andere Seite öffnen.

Answer 4

Dies sollte den Trick:

$(function() 
{ 
    $("a").click(function() 
    { 
     $($(this).attr("href")).focus(); 

     return false; // remember to stop links default action 
    }); 
}); 

Geprüft neueste Version von Chrome, IE und FireFox.

Answer 5

Wie von Daniel angedeutet, ist das Problem das #text_field auf dem Link. Nachdem Sie den Fokus festgelegt haben, möchte Firefox zu dem genannten Ort im Dokument springen. Sie müssen nur false aus Ihrem Klick-Handler zurückgeben.

$(field_id).focus(); 
return false; 

Answer 6

Sie könnten auch mehr explizit sein und preventDefault auf der Veranstaltung arg nennen.

$(document).ready(function() 
{ 
    $("a").click(function(event) { 
     var field_id = $(this).attr("href"); 
     $(field_id).focus() 
     event.preventDefault(); 
    }); 

}); 

Answer 7

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script> 
$(function() { 
    $("a").click(function() { 
     var field_id = $(this).attr("href"); 
     $("#"+ field_id).focus(); 
     return false; 
    }); 
}); 
</script> 

<a href="text_field">Focus</a> 
<input type="text" name="text_field" id="text_field" />