La fonction de mise au point jQuery ne fonctionne pas dans Firefox

Question

Le code suivant met l'accent sur la saisie de texte après que vous avez cliqué sur le lien. Cela fonctionne très bien pour Chrome 2.x, IE8 et Opera 9.64 mais pas sur Firefox 3.0.9. L'entrée de texte clignote rapidement dans Firefox puis disparaît, je travaille actuellement sur 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" /> 

Est-ce que quelqu'un sait comment gérer ce qui précède dans Firefox?

Answer 1

Je ne sais pas si c'est ce que vous voulez. Pour mettre l'accent sur l'entrée en cliquant sur le label vous pouvez le faire:

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

OU

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

Answer 2

En plus des deux autres réponses, la raison pour laquelle votre chemin ne fonctionne pas parce que la valeur de le champ href est généralement complet avec l'url (cela dépend du navigateur et jQuery ne le résout pas). Donc, si vous avez un "#text_field" href, vous pouvez trouver que la valeur réelle du champ est "http://localhost/#text_field", c'est pourquoi cela ne correspond pas à votre modèle.

La suggestion de Daniel avec les étiquettes et les attributs «pour» est une bonne solution si vous voulez vous concentrer sur les champs.

Answer 3

Je pense que cette erreur dans FF se produit parce que, après avoir cliqué sur le lien, il exécute le rappel de clic et ouvre ensuite le champ de texte de la page #. Vous pouvez essayer:

$(document).ready(function() 
{ 
    $("div").click(function() { 
     var field_id = $(this).attr("forInput"); 
     $(field_id).focus(); 
    }); 
}); 
</script> 

<div forInput="#text_field">Focus</div> 
<input type="text" name="text_field" id="text_field" /> 

De cette façon, il n'y a pas de lien et n'ouvrira pas une autre page.

Answer 4

Cela devrait faire l'affaire:

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

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

Testé dans la dernière version de Chrome, IE et FireFox.

Answer 5

Comme l'a laissé entendre Daniel, le problème est le #text_field sur le lien. Après avoir défini le focus, Firefox veut sauter à cet emplacement nommé dans le document. Tout ce que vous devez faire est de renvoyer false à partir de votre gestionnaire de clic.

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

Answer 6

Vous pouvez également être plus explicite et appeler preventDefault sur le arg événement.

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