text-valitsin
Valitsin :text valitsee
tyyppiä text olevat syöttökentät.
Katso HTML-ohjeen
input-tagi.
Koska :text ei kuulu CSS-spesifikaatioon,
on nykyaikaisissa selaimissa suorituskyvyn parantamiseksi
sen sijasta parempi käyttää
[type='text'].
Syntaksi
Näin valitsemme tyyppiä text olevat syöttökentät:
$(':text');
Kuten muiden pseudoluokkavalitsimien kohdalla
(alkavat ':'-merkillä), ':'-merkin eteen on
parasta laittaa tagin nimi tai toinen valitsin,
muuten käytetään '*'-valitsinta,
eli $(':text') tulkitaan
$('*:text'):ksi, joten sen sijasta on
parempi käyttää $('input:text').
On muistettava, että :text valitsee myös
kaikki syöttökentät, joiden type-attribuuttia ei ole määritetty,
ero käyttäytymisessä näkyy seuraavassa
esimerkissä:
$('<input>').is('[type=text]'); // palauttaa false
$('<input>').is(':text'); // palauttaa true
Esimerkki
Valitaan kaikki tyyppiä text olevat syöttökentät ja
tehdään niistä vihreät taustat ja punainen kehys käyttämällä
css-metodia:
<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(); // estää lomakkeen lähetyksen
});
