Einführung in die Tutorialfähigkeiten von HTML5-Platzhaltern (leere Eingabeaufforderung) attribute_html5

Ursprüngliche Adresse: HTML5-Platzhalterattribut
Demoadresse: Platzhalterdemo
Ursprüngliches Datum: 9. August 2010
Übersetzungsdatum: August 2013 Am 6.
Der Browser hat viele HTML5-Funktionen eingeführt: Einige basieren auf HTML, andere in Form von JavaScript-APIs, aber sie sind alle nützlich. Einer meiner Favoriten ist die Einführung des Platzhalterattributs für Eingabeelemente.
Das Platzhalterattribut zeigt den Einführungstext an, bis das Eingabefeld den Eingabefokus erhält. Wenn der Benutzer Inhalte eingibt, wird der Einführungsinhalt automatisch ausgeblendet. Sie haben diese Technik zweifellos tausende Male in JavaScript implementiert gesehen, aber die native Unterstützung von HTML5 ist im Allgemeinen besser.
HTML-Code lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

< input type="text" name="address" placeholder="Bitte geben Sie Ihre permanente Adresse ein..."> Sie müssen lediglich ein Platzhalterattributfeld hinzufügen und einige leitende Textinhalte, es ist kein zusätzliches JavaScript-Skript erforderlich, um diesen Effekt zu erzielen. Fühlt es sich nicht großartig an? , bis jetzt, im Jahr 2013, sollten es alle gängigen Browser unterstützen.)
Da es sich bei Platzhaltern um eine neue Funktion handelt, ist es notwendig, die Browserunterstützung zu testen. Der JS-Code lautet wie folgt:

Code kopieren


Der Code lautet wie folgt:

// In JS Erstellen Sie ein Eingabeelement und bestimmen Sie, ob das Element ein Attribut namens Platzhalter hat // Wenn der Browser es unterstützt, ist dieses Attribut im DOM vorhanden, auf das in js verwiesen wird function hasPlaceholderSupport() { var input = document.createElement('input');

return ('placeholder' in input);

Und wenn der Browser die Platzhalterfunktion nicht unterstützt, dann Sie benötigen eine Fallback-Strategie, z. B. MooTools, Dojo oder andere JavaScript-Tools. (Dojo kann jetzt weniger verwendet werden und jQuery und ExtJS werden in China häufiger verwendet.)





Code kopieren

Der Der Code lautet wie folgt:

/* jQuery-Code, denken Sie natürlich daran, die jQuery-Bibliothek einzuführen*/ $(function(){ if(!hasPlaceholderSupport()){ // Holen Sie sich das Adresselementvar $address = $("input[name='address']"

placeholder = $address.attr("placeholder"); Fokusereignis binden

$address.bind('focus',function(){

if(placeholder == $address.val()){
$address.val('');
}
} );
// Fokusverlust-Ereignis
$address.bind('blur',function(){
if('' == $address.val()){
$address.val (Platzhalter);
}
});


Platzhalter ist ein weiteres großartiges zusätzliches Browserattribut zum Ersetzen von js-Fragmenten. Sie können sogar den HTML5-Platzhalterstil bearbeiten
Der gesamte Code lautet wie folgt:





Kopieren Sie den Code

Der Code lautet wie folgt:

Generator“ content="EditPlus">



<script> <br>// Erstellen Sie ein Eingabeelement in JS und bestimmen Sie, ob das Element ein Attribut namens Platzhalter hat <br>// Wenn der Browser dies unterstützt, verfügt das in js referenzierte DOM über diese Eigenschaften <br>Funktion hasPlaceholderSupport() { <br>var input = document.createElement('input'); <br>return ('placeholder' in input); <br>/* jQuery-Code, natürlich, denken Sie daran, den zu importieren jQuery-Bibliothek*/ <br>$(function(){ <br>if(!hasPlaceholderSupport()){ <br>// Holen Sie sich das Adresselement <br>var $address = $("input[name= 'address' ]"); <br>placeholder = $address.attr("placeholder"); <br>// Fokusereignis binden<br>$address.bind('focus',function(){ <br> if(placeholder = = $address.val()){ <br>$address.val(''); <br>} <br>} <br>// Lost Focus Event<br>$address.bind ('blur') ,function(){ <br>if('' == $address.val()){ <br>$address.val(placeholder); <br> } <br> }); <br></script>

>