Μια ματιά στο χαρακτηριστικό κράτησης θέσης HTML5

Ένα από τα αγαπημένα μου νέα κομμάτια στο HTML5 είναι η δυνατότητα προσθήκης Κείμενο κράτησης θέσης εύκολα. Το κείμενο με σύμβολο κράτησης θέσης είναι το γκρίζο κείμενο που βρίσκετε σε ένα πεδίο εισαγωγής που χρησιμοποιείται για να δώσει μια υπαινιγμό στους χρήστες σχετικά με την εισροή που αναμένεται σε αυτό το πεδίο. Μόλις οι χρήστες αρχίσουν να πληκτρολογούν στο εισαγωγή πεδίο, αυτό το κείμενο θα εξαφανιστεί.

Στις παλιές μέρες, το κάνουμε αυτό συνήθως με JavaScript, ως εξής;

Δεν υπάρχει τίποτα κακό με αυτή την πρακτική, αλλά είναι πιο εύκολο για το HTML5.

Το HTML5 εισήγαγε ένα νέο χαρακτηριστικό με λογικό όνομα. δείκτη κράτησης θέσης. Ακολουθεί ένα παράδειγμα:

Αν το δούμε στα προγράμματα περιήγησης, η είσοδος πρέπει τώρα να έχει το γκρι κείμενο, όπως φαίνεται παρακάτω.

Μερικά πράγματα που πρέπει να σημειωθούν: σύμφωνα με τις προδιαγραφές, το δείκτη κράτησης θέσης το χαρακτηριστικό δεν θα πρέπει να χρησιμοποιείται ως εναλλακτική λύση έναντι του a επιγραφή και προτείνεται επίσης ότι αυτό το χαρακτηριστικό θα πρέπει να εφαρμοστεί μόνο εισαγωγή τύποι που απαιτούν κείμενο, π.χ.. κείμενο, Κωδικός πρόσβασης, Ψάξιμο, ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ, textarea και τηλ.

Προσθέτωντας δείκτη κράτησης θέσης στο εισαγωγή τύποι: ραδιόφωνο και πλαίσιο ελέγχου δεν θα κάνει καμία διαφορά.

Θέση και CSS

Επιπλέον, είναι δυνατό και ο σχεδιασμός του κειμένου κράτησης θέσης μέσω του CSS, αλλά κατά το χρόνο αυτής της γραφής εξακολουθεί να περιορίζεται μόνο σε προγράμματα περιήγησης Firefox και Webkit.

Το παρακάτω παράδειγμα δείχνει πώς αλλάζουμε το κείμενο με σύμβολο κράτησης θέσης στο πράσινο τόσο στο Webkit όσο και στον Firefox.

 είσοδος :: - webkit-input-placeholder χρώμα: πράσινο;  είσοδος: -moz-placeholder χρώμα: πράσινο;  

Ακριβώς για να θυμόμαστε όμως, το :: - webkit-input-placeholder και : -moz-placeholder θα επηρεάσει μόνο το κείμενο και δεν μπορεί να γραφτεί παράλληλα.

 είσοδος :: - webkit-input-placeholder, είσοδος: -moz-placeholder χρώμα: πράσινο;  

Αυτό το κομμάτι του κώδικα δεν θα λειτουργήσει.

Επιλογή επιλογής

Το CSS3 ήρθε επίσης για να υποστηρίξει αυτό το χαρακτηριστικό εισάγοντας το [placeholder] επιλογέας χαρακτηριστικών.

 είσοδος [σύμβολο κράτησης θέσης] σύνορο: 1px πράσινο πράσινο;  

Στο παραπάνω παράδειγμα, επιλέγουμε κάθε εισαγωγή που έχει το δείκτη κράτησης θέσης και μετατρέψτε το περιθώριο σε πράσινο.

Συμβατότητα με το πρόγραμμα περιήγησης

Αυτή η νέα λειτουργία HTML5 δεν αποτελεί έκπληξη στα παλαιά προγράμματα περιήγησης και επί του παρόντος υποστηρίζεται πλήρως μόνο σε: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 και Internet Explorer 10 (το οποίο δεν έχει ακόμη κυκλοφορήσει επίσημα).

Τοποθετώντας Polyfills

Ωστόσο, αν χρειαστεί να εμφανιστεί το σύμβολο κράτησης θέσης σε παλαιότερα προγράμματα περιήγησης, αλλά να μπορέσουμε να χρησιμοποιήσουμε το δείκτη κράτησης θέσης χαρακτηριστικό, μπορούμε να χρησιμοποιήσουμε το Polyfills. Υπάρχουν πολλά Τοποθετώντας Polyfills εκεί έξω, αλλά σε αυτό το παράδειγμα θα χρησιμοποιήσουμε το PlaceMe.js.

Το PlaceMe.js, όπως μπορείτε να δείτε από το απόσπασμα κώδικα παραπάνω, εξαρτάται από το jQuery. Τώρα, αν το δούμε, για παράδειγμα, στον Internet Explorer 9, όλες οι εισροές θα πρέπει τώρα να εμφανίζουν το κείμενο με σύμβολο κράτησης θέσης.

• Προβολή επίδειξης
• Λήψη πηγής

Τελική σκέψη

ο HTML5 Θέση χαρακτηριστικό σίγουρα διευκολύνει την προσθήκη κειμένου κράτησης θέσης. Τώρα εναπόκειται σε εμάς, οι προγραμματιστές ιστού και οι σχεδιαστές, να επιλέξουμε τη μέθοδο που θα χρησιμοποιήσουμε: JavaScript ή HTML5.

Εάν θεωρείτε ότι η χρήση του Polyfills και του jQuery για υποστήριξη παλαιών προγραμμάτων περιήγησης είναι περιττή, τότε η JavaScript είναι προφανώς πιο κατάλληλη για την εργασία. Αλλά αν μπορείτε να αγνοήσετε ειρηνικά τα παλιά προγράμματα περιήγησης τότε η χρήση του HTML5 Placeholder είναι ίσως ένας καλύτερος τρόπος.