Selektor text

Selektor :text vybírá inputy s typem text. Podívejte se na tag input. Protože :text nepatří do CSS specifikace, pro lepší výkon v moderních prohlížečích je lepší použít místo něj [type='text'].

Syntaxe

Takhle vybíráme inputy s typem text:

javascript$(':text');

Stejně jako u jiných selektorů pseudotříd (započínajících ':'), je lepší před ':' uvést název tagu nebo jiného selektoru, v opačném případě bude aplikován selektor '*', to znamená $(':text') bude vnímáno jako $('*:text'), proto je místo toho lepší použít $('input:text'). Je třeba pamatovat, že :text také vybere všechny inputy, kterým není uveden atribut type, rozdíly v chování lze vidět na následujícím příkladu:

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

Příklad

Pojďme vybrat všechny inputy s typem text a nastavit jim zelené pozadí a červený rámeček pomocí metody 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(); // zabrání odeslání formuláře
});

Viz také