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

Show placeholder text in empty input fields

本文关键字：显示 占位符 文本 字段 输入      更新时间：2023-09-26

在onfocus（输入字段上）期间，输入默认值被禁用，但在输入字段上却可以写入任何类似默认值不存在的内容，这是怎么可能的？

这里是简单的html=>

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

和javascript=>

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

但我不能做我想做的事。

通过"HTML5"，为表单元素引入了新的功能和属性（例如内置的表单验证）

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

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

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

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

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

对于较旧的浏览器，您需要编写一个回退JavaScript-Function，读取该属性并自行实现行为。网上有一些关于这方面的博客文章，比如大卫·沃尔什的一篇，可以帮助你做到这一点。

编辑：

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

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

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

与此类似，浏览器的本地占位符实现将被使用，如果它存在的话，否则，JavaScript函数将负责处理这一问题。

更新09/11/2012

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

github 的jQuery占位符

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

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

请参阅此处的快速和肮脏示例。

相关文章：