的HTML

Question

有一个文本输入字段的最佳方法是什么，该字段显示以灰色显示在该字段中输入内容的说明。当您关注该输入字段时，灰色指令文本将消失，输入文本将显示为黑色。如果您删除输入文本并远离该输入，则会再次出现灰色文本说明。

我尝试用jQuery实现这个，但是我遇到了不同浏览器的各种奇怪问题。有时当你回到屏幕时，说明文字会变黑，不再消失，就像这样的问题。

这是否有标准的javascript库？我找不到任何东西！

哦，指令文本不能是图像，因为它必须以不同的语言提供，具体取决于浏览器的语言偏好。

Answer 1

你不需要javascript。

<强> HTML5：

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

这适用于现代浏览器。如果您将modernizr.js添加到您的页面，那么它将适用于所有浏览器。

Answer 2

您可以在jquery.use this链接中使用水印插件。

例如

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

Answer 3

的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 4

使输入透明并将文本放在后面。检查值onload，onblur以确定文本是否可见。让它在焦点上不可见。

例如：http://dorward.me.uk/tmp/label-work/example.html（您只需要设置标签样式并输入不同的前景色）

Answer 5

看看这个：http://fuelyourcoding.com/scripts/infield/

Answer 6

占位符代码 - 名称

变量的名称是

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

Answer 7

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

Javascript文本输入字段，显示指令（占位符）文本

7 个答案:

的HTML

的jQuery

demo