javascript 在空输入字段中显示占位符文本

Show placeholder text in empty input fields

提问by nanobash

How it is possible that during onfocus(on input field) input default value seen like it is disabled but on input field could be written anything like default value isn't exists ?

怎么可能在onfocus（在输入字段上）输入默认值被禁用但在输入字段上可以写任何类似默认值不存在的东西？

here is simple html =>

这是简单的 html =>

<input type="text" id="x">

and javascript =>

和 javascript =>

document.getElementById("x").onfocus = function(){
this.style.opacity = 0.5;
}

but I couldn't do what I want.

但我不能做我想做的事。

回答by GNi33

With "HTML5", new functionality and attributes have been introduced for form-Elements (such as built-in form-validation for example)

在“HTML5”中，为表单元素引入了新的功能和属性（例如内置表单验证）

One of those is the placeholder- attribute. It shows a specified text on empty input-Fields that will be hidden, after a user starts to fill text in the field. The HTML-Markup looks like this:

其中之一是placeholder- 属性。在用户开始在字段中填充文本后，它会在将被隐藏的空输入字段上显示指定的文本。HTML 标记如下所示：

<input type="text" name="first_name" placeholder="Fill in your name">

This feature is not supported by all browsers yet (you can check compatibility on caniuse.com

并非所有浏览器都支持此功能（您可以在caniuse.com上检查兼容性

In your code, you can check for compatibility with a simple function:

在您的代码中，您可以检查与一个简单函数的兼容性：

var placeHolderSupport = ('placeholder' in document.createElement('input'));

For older browsers, you would need to write a fallback JavaScript - Function, that reads this attribute and implement the behaviour yourselve. There are some blog-posts about this around the web, like one from David Walsh, that could help you with this.

对于较旧的浏览器，您需要编写一个后备 JavaScript - 函数，读取此属性并自行实现行为。网络上有一些关于此的博文，例如David Walsh 的博文，可以帮助您解决此问题。

edit:

编辑：

I stumbled over this gistby Hagenburger (according blog-post), that should implement the behaviour you want to achieve for old browsers too. Note: it's jQuery - code, not sure if you are using it, but even if not, it should give you an idea, what to do.

我偶然发现了Hagenburger 的这个要点（根据博客文章），它也应该实现您想要为旧浏览器实现的行为。注意：它是 jQuery - 代码，不确定您是否在使用它，但即使没有，它也应该给您一个想法，该做什么。

So, given the compatibility - check from above:

因此，考虑到兼容性 - 从上面检查：

if(!placeHolderSupport){
    //gist code here (not sure if i'm allowed to copy this into my answer)
}

Like that, the native placeholder-implementation of the browser would be used, if it exists, otherwise, the JavaScript-function would take care of this.

像那样，将使用浏览器的原生占位符实现（如果存在），否则，JavaScript 函数会处理这个问题。

update 09/11/2012

更新 09/11/2012

SO-User and Moderator ThiefMaster just pointed out a better and newer jQuery-plugin by Mathias Bynens, that already has built-in check for placeholder- support. Surely a better way to implement the placeholder-fallback than the gist I posted:

SO-User 和版主 ThiefMaster 刚刚指出了 Mathias Bynens 的一个更好和更新的 jQuery 插件，该插件已经内置检查placeholder- 支持。当然比我发布的要点更好的实现占位符回退的方法：

jQuery Placeholder at github

github 上的 jQuery 占位符

回答by Vinit

<input type="text" value="blah" name="Email"
 id="Email" onblur="this.value = 'blah';"
 onfocus="this.value = 'blah';" />

回答by Robin Maben

<input type="text" data-placeholder="Name" />


$(function(){
    $('input').each(function(){
    if($(this).val() == ''){
        $(this).val($(this).data('placeholder'));
    }
});

});
$('input').focusin(function(){
    if($(this).val() == $(this).data('placeholder')){
        $(this).val('');
    }
}).focusout(function(){    
    if($(this).val().length < 0){
        $(this).val($(this).data('placeholder'));
    }
})?;?

See example quick and dirty example here.

在此处查看示例快速和肮脏的示例。