Pola wprowadzania tekstu JavaScript, które wyświetlają tekst instrukcji (symbol zastępczy).

Question

Jaki jest najlepszy sposób, aby pole tekstowe wyświetlające instrukcje, co należy wprowadzić w tym polu na szaro. Po ustawieniu ostrości na tym polu wejściowym szary tekst instrukcji znika, a tekst wejściowy jest czarny. Jeśli usuniesz tekst wejściowy i ustawisz ostrość z dala od tego wejścia, szary tekst instrukcji pojawi się ponownie.

Próbowałem zaimplementować to z jQuery, ale dostaję różnego rodzaju dziwne problemy z różnymi przeglądarkami. Czasami po powrocie do ekranu tekst instrukcji staje się czarny i już nie znika, takie problemy.

Czy istnieje standardowa biblioteka javascript dla tego? Nie mogę znaleźć żadnego!

Och, a tekst instrukcji nie może być obrazem, ponieważ musi być dostępny w różnych językach, w zależności od preferencji językowych przeglądarki.

Answer 1

Można użyć wtyczki znaku wodnego w jquery.use this odnośnik.

przykład

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

Answer 2

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

Answer 3

Wprowadź dane wejściowe jako przezroczyste i umieść tekst za nim. Sprawdź wartość onload, onblur, aby zdecydować, czy tekst ma być widoczny, czy nie. Spraw, by był niewidoczny.

Na przykład: http://dorward.me.uk/tmp/label-work/example.html (po prostu trzeba projektować etykiety i wejście z różnych kolorów na pierwszym planie)

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

Spójrz na ten jeden: http://fuelyourcoding.com/scripts/infield/

Answer 6

Do tego nie potrzebujesz javascript.

HTML5:

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

To działa w nowoczesnych przeglądarek. Jeśli dodasz plik modernizr.js do swojej strony, będzie działał we wszystkich przeglądarkach.

Answer 7

kod zastępczy - nazwa

nazwa zmiennej jest

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