Επιλογέας text
Ο επιλογέας :text επιλέγει πεδία εισόδου με
τύπο text. Δείτε την ετικέτα
input.
Εφόσον το :text δεν ανήκει στις προδιαγραφές CSS,
για καλύτερη απόδοση σε σύγχρονα
προγράμματα περιήγησης, είναι προτιμότερο να χρησιμοποιηθεί
το [type='text'] αντ' αυτού.
Σύνταξη
Εδώ επιλέγουμε πεδία εισόδου με τύπο text:
$(':text');
Όπως και με άλλους ψευδο-επιλογείς κλάσεων
(που ξεκινούν με ':'), είναι προτιμότερο να τοποθετηθεί
το όνομα της ετικέτας ή ενός άλλου επιλογέα πριν από το ':',
διαφορετικά θα εφαρμοστεί ο καθολικός επιλογέας '*',
δηλαδή το $(':text') θα ερμηνευτεί ως
$('*:text'), γι' αυτό αντ' αυτού είναι προτιμότερο να
χρησιμοποιηθεί το $('input:text').
Πρέπει να θυμόμαστε ότι το :text θα επιλέξει επίσης
όλα τα πεδία εισόδου στα οποία δεν έχει καθοριστεί το χαρακτηριστικό type,
οι διαφορές στη συμπεριφορά μπορούν να δουν στο ακόλουθο
παράδειγμα:
$('<input>').is('[type=text]'); // επιστρέφει false
$('<input>').is(':text'); // επιστρέφει true
Παράδειγμα
Ας επιλέξουμε όλα τα πεδία εισόδου με τύπο text και
ας τους κάνουμε πράσινο φόντο και κόκκινο περίγραμμα χρησιμοποιώντας τη μέθοδο
css:
<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>
$('form input:text').css({background: 'green', border: '2px red solid'});
$('form').submit(function(event) {
event.preventDefault(); // αποτρέπει την αποστολή της φόρμας
});
