Selektor text
Selektor :text wybiera pola input z
typem text. Zobacz tag
input.
Ponieważ :text nie należy do specyfikacji CSS,
dla lepszej wydajności w nowoczesnych
przeglądarkach lepiej zastosować zamiast niego
[type='text'].
Składnia
W ten sposób wybieramy pola input z typem text:
$(':text');
Podobnie jak w przypadku innych selektorów pseudoklas
(zaczynających się od ':'), przed ':' lepiej
umieścić nazwę tagu lub innego selektora, w
przeciwnym razie zostanie zastosowany selektor '*',
czyli $(':text') będzie postrzegany jako
$('*:text'), więc zamiast tego lepiej
użyj $('input:text').
Należy pamiętać, że :text wybierze również
wszystkie pola input, dla których nie określono atrybutu type,
różnice w zachowaniu można zobaczyć w następującym
przykładzie:
$('<input>').is('[type=text]'); // zwróci false
$('<input>').is(':text'); // zwróci true
Przykład
Wybierzmy wszystkie pola input z typem text i
zróbmy im zielone tło i czerwoną ramkę za pomocą metody
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(); // zapobiega wysłaniu formularza
});
