Sélecteur text
Le sélecteur :text sélectionne les inputs avec
le type text. Voir la balise
input.
Étant donné que :text n'appartient pas aux spécifications CSS,
pour améliorer les performances dans les navigateurs modernes,
il est préférable d'utiliser à la place
[type='text'].
Syntaxe
Voici comment nous sélectionnons les inputs de type text :
$(':text');
Comme avec les autres sélecteurs de pseudo-classes
(commençant par ':'), il est préférable de placer
le nom de la balise ou un autre sélecteur avant ':',
sinon le sélecteur '*' sera appliqué,
c'est-à-dire que $(':text') sera interprété comme
$('*:text'), donc il vaut mieux utiliser à la place
$('input:text').
Il faut se rappeler que :text sélectionnera également
tous les inputs dont l'attribut type n'est pas spécifié,
les différences de comportement peuvent être vues dans l'exemple
suivant :
$('<input>').is('[type=text]'); // retourne false
$('<input>').is(':text'); // retourne true
Exemple
Sélectionnons tous les inputs de type text et
donnons-leur un fond vert et une bordure rouge à l'aide de la méthode
css :
<form>
<input type="button" value="button">
<input type="file">
<input type="checkbox">
<button>button</button>
<input type="reset">
<input type="radio" name="test">
<input type="radio" name="test">
<input type="checkbox">
<input type="text">
</form>
$('form input:text').css({background: 'green', border: '2px red solid'});
$('form').submit(function(event) {
event.preventDefault(); // empêche l'envoi du formulaire
});
