Selektor text - Auswahl von Inputs mit dem Typ text

Der Selektor :text wählt Input-Felder mit dem Typ text aus. Siehe Tag input. Da :text nicht zur CSS-Spezifikation gehört, ist es für eine bessere Leistung in modernen Browsern besser, stattdessen [type='text'] zu verwenden.

Syntax

So wählen wir Input-Felder mit dem Typ text aus:

javascript$(':text');

Wie bei anderen Pseudo-Klassen-Selektoren (die mit ':' beginnen), sollte vor ':' besser der Tag-Name oder ein anderer Selektor stehen, andernfalls wird der Selektor '*' angewendet, das heißt $(':text') wird als $('*:text') interpretiert, daher ist es besser, $('input:text') zu verwenden. Man sollte beachten, dass :text auch alle Input-Felder auswählt, bei denen das Attribut type nicht angegeben ist. Die Unterschied im Verhalten kann man im folgenden Beispiel sehen:

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

Beispiel

Lassen Sie uns alle Input-Felder mit dem Typ text auswählen und ihnen einen grünen Hintergrund und einen roten Rahmen mit der Methode css geben:

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(); // verhindert das Absenden des Formulars
});

Siehe auch