Επιλογέας text

Ο επιλογέας :text επιλέγει πεδία εισόδου με τύπο text. Δείτε την ετικέτα input. Εφόσον το :text δεν ανήκει στις προδιαγραφές CSS, για καλύτερη απόδοση σε σύγχρονα προγράμματα περιήγησης, είναι προτιμότερο να χρησιμοποιηθεί το [type='text'] αντ' αυτού.

Σύνταξη

Εδώ επιλέγουμε πεδία εισόδου με τύπο text:

javascript$(':text');

Όπως και με άλλους ψευδο-επιλογείς κλάσεων (που ξεκινούν με ':'), είναι προτιμότερο να τοποθετηθεί το όνομα της ετικέτας ή ενός άλλου επιλογέα πριν από το ':', διαφορετικά θα εφαρμοστεί ο καθολικός επιλογέας '*', δηλαδή το $(':text') θα ερμηνευτεί ως $('*:text'), γι' αυτό αντ' αυτού είναι προτιμότερο να χρησιμοποιηθεί το $('input:text'). Πρέπει να θυμόμαστε ότι το :text θα επιλέξει επίσης όλα τα πεδία εισόδου στα οποία δεν έχει καθοριστεί το χαρακτηριστικό type, οι διαφορές στη συμπεριφορά μπορούν να δουν στο ακόλουθο παράδειγμα:

javascript$('<input>').is('[type=text]'); // επιστρέφει false
$('<input>').is(':text'); // επιστρέφει true

Παράδειγμα

Ας επιλέξουμε όλα τα πεδία εισόδου με τύπο text και ας τους κάνουμε πράσινο φόντο και κόκκινο περίγραμμα χρησιμοποιώντας τη μέθοδο 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(); // αποτρέπει την αποστολή της φόρμας
});

Δείτε επίσης