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

Question

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

这是简单的html =>

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

和 javascript =>

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

但我不能做我想做的事。

Answer 1

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

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

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

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

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

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

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

编辑：

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

因此，鉴于兼容性 - 从上面检查：

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

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

2012 年 9 月 11 日更新

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

github 上的 jQuery 占位符

Answer 2

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

Answer 3

<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'));
    }
})​;​

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