Teksta selektors

Selektors :text atlasa ievades laukus ar tipu text. Skatīt iezīmi input. Tā kā :text neietilpst CSS specifikācijā, tai, lai uzlabotu veiktspēju mūsdienu pārlūkprogrammās, tās vietā labāk lietot [type='text'].

Sintakse

Šādi mēs atlasām ievades laukus ar tipu text:

javascript$(':text');

Tāpat kā ar citiem pseidoklases selektoriem (kas sākas ar ':'), pirms ':' labāk norādīt iezīmes nosaukumu vai citu selektoru, pretējā gadījumā tiks lietots selektors '*', tas ir, $(':text') tiks uztverts kā $('*:text'), tāpēc tā vietā labāk lietot $('input:text'). Jāatceras, ka :text arī atlasīs visus ievades laukus, kuriem nav norādīts atribūts type, atšķirības uzvedībā var redzēt šajā piemērā:

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

Piemērs

Atlasīsim visus ievades laukus ar tipu text un padarīsim tos ar zaļu fona krāsu un sarkanu apmali, izmantojot metodi css:

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(); // novērš formas iesniegšanu
});

Skatiet arī