Geekeries et d'autres choses

Prenons un champ de formulaire texte classique.

<input type='text' name='search' value="Recherchez" />

Ajoutons donc un peu de folie et imaginons un instant que nous souhaitions sélectionner le contenu de la valeur contenue dans le champ. L'idée a été d'utiliser directement la fonction DOM select comme handler de l'événement focus. Bon, comme il se trouve qu'on utilise déjà l'excellent jQuery dans le projet, on peut se retrouver avec du code comme ça^[1] :

$input.focus($input.get(0).select);

Avec Internet Explorer 7 (et peut-être 8), on a alors cette erreur, qui, d'après Firebug, provient du fin fond de jQuery :

Cet objet ne gère pas cette propriété ou cette méthode

Cela semble venir de la ligne suivante :

handler.guid = jQuery.guid++

En gros, cet ID unique est utilisé par jQuery pour tracer les fonctions utilisées comme gestionnaire d'événemen. Je rentre pas plus dans les détails, c'est pas le sujet. Tout ce qu'il faut comprendre, c'est que handler est la fonction qu'on passe en paramètre du bind de jQuery, ou l'un de ses raccourcis (tels que focus).

Et le problème avec IE, c'est que les objets natifs du DOM (on les appelle host objects), tels qu'un champ de formulaire justement, ne peuvent pas être manipulés ainsi : on ne peut ajouter une propriété à notre fonction select.

J'ai donc essayé ensuite d'utiliser du pur DOM :

var input = $input.get(0);
input.onfocus = input.select;

Ce n'est pas satisfaisant : ça fonctionne bien dans Firefox, mais pas dans Internet Explorer, et dans Chrome ça fait un truc louche (ça sélectionne tout puis ça désélectionne).

D'où la solution finale : encapsuler l'appel à select dans une vraie fonction Javascript :

input.onfocus = function() { input.select(); };

ou, si on préfère tout faire en jQuery :

$input.focus(function() { $input.get(0).select(); });

Et on peut même essayer d'utiliser $.proxy (attention, je n'ai pas essayé, je suis pas sûr que l'utiliser avec un argument n'ait pas des effets de bord) :

$input.focus($.proxy($input.get(0).select));