Javascript Texteingabefelder, die Anweisung (Platzhalter) Text anzeigen

Question

Was ist die beste Möglichkeit, ein Texteingabefeld, das Anweisungen anzeigt, was in diesem Feld in grau eingeben. Wenn Sie sich auf dieses Eingabefeld konzentrieren, verschwindet der graue Anweisungstext und Ihr Eingabetext erscheint schwarz. Wenn Sie den eingegebenen Text löschen und von dieser Eingabe weg fokussieren, wird der graue Text wieder angezeigt.

Ich habe versucht, dies mit jQuery zu implementieren, aber ich bekomme alle Arten von seltsamen Probleme mit verschiedenen Browsern. Manchmal, wenn Sie einen Bildschirm zurückgehen, wird der Anweisungstext schwarz und verschwindet nicht mehr, Probleme wie diese.

Gibt es dafür eine Standard-Javascript-Bibliothek? Ich kann keine finden!

Oh, und der Anweisungstext kann kein Bild sein, weil er abhängig von der Spracheinstellung des Browsers in verschiedenen Sprachen verfügbar sein muss.

Answer 1

Sie können Plugin this Link in jquery.use verwenden Wasserzeichen.

Beispiel

$(this).Watermark("your instructions"); 

Answer 2

<input type="text" name="myText" value="Enter Name" style="color:gray" onfocus="this.value=''"> 

Answer 3

Machen Sie die Eingabe transparent und setzen Sie den Text dahinter. Überprüfen Sie den Wert onload, onblur, um zu entscheiden, ob der Text sichtbar sein soll oder nicht. Mach es unsichtbar im Fokus.

Zum Beispiel: http://dorward.me.uk/tmp/label-work/example.html (Sie müssen nur das Etikett und die Eingabe mit verschiedenen Farben im Vordergrund, um Stil)

Answer 4

html

<input type="text" id="user" class="textbox default" value="Enter login name"> 
<input type="password" id="pass" class="textbox"> 

jQuery

$(function(){ 
    $('.textbox').focus(function(){ 
    if (this.value == this.defaultValue) { 
     this.value = ''; 
     $(this).removeClass('default'); 
    }; 
    }).blur(function(){ 
    if (this.value == '') { 
     this.value = this.defaultValue; 
     $(this).addClass('default'); 
    }; 
    });​ 
}); 

demo

Answer 5

Blick auf diese: http://fuelyourcoding.com/scripts/infield/

Answer 6

Sie benötigen dazu kein Javascript.

HTML5:

<input type="text" id="email" name="email" placeholder="Enter your email address"> 

Dies funktioniert in modernen Browsern. Wenn Sie Ihrer Seite moderniszr.js hinzufügen, funktioniert es in allen Browsern.

Answer 7

Platzhalter-Code - Name

Name der Variablen ist,

var name=$("#con-name"); 
var nameval="Enter your name"; 



name.val(nameval); 
name.focus(function(){ 
    if (this.value == nameval) { 
     this.value = ''; 
    }; 
    }).blur(function(){ 
     if (this.value == '') {  
     this.value = nameval; 
    }; 
}); 
//submit to clear code 
$("#sub_con_page").click(function() { 
    if(name.val()==nameval) { 
     name.val(""); 
    } 
}); 

DEMO LINK