Text-selektor

Selektor :text valib tüübiga text input elemendid. Vaata silti input. Kuna :text ei kuulu CSS spetsifikatsiooni, siis parema jõudluse saavutamiseks kaasaegsetes brauserites on selle asemel parem kasutada [type='text'].

Süntaks

Nii valime me text-tüüpi input elemendid:

javascript$(':text');

Nagu teiste pseudo-klassi selektoritega (algavad märgiga ':'), on enne ':' parem panna sildi nimi või mõni muu selektor, vastasel juhul rakendub selektor '*', see tähendab $(':text') mõistetakse kui $('*:text'), seetõttu on selle asemel parem kasutada $('input:text'). Tuleb meeles pidada, et :text valib ka kõik input elemendid, millel pole atribuuti type määratud, erinevust käitumises on võimalik näha järgneval näitel:

javascript$('<input>').is('[type=text]'); // tagastab false
$('<input>').is(':text'); // tagastab true

Näide

Valime kõik text-tüüpi input elemendid ja muudame nende tausta roheliseks ja raami punaseks meetodi css abil:

html<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>

javascript$('form input:text').css({background: 'green', border: '2px red solid'});

$('form').submit(function(event) {
  event.preventDefault(); // takistab vormi saatmist
});

Vaata ka