Question

在onfocus（在输入字段上）输入默认值如何被禁用但在输入字段上可以写入默认值不存在的情况下怎么可能？

这里是简单的html =＆gt;

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

和javascript =＆gt;

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

但我无法做我想做的事。

Answer 1

使用“HTML5”，已经为表单元素引入了新功能和属性（例如内置表单验证）

其中一个是placeholder - 属性。它在用户开始填充字段中的文本后，在空输入字段上显示将被隐藏的指定文本。 HTML-Markup看起来像这样：

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

所有浏览器都不支持此功能（您可以检查caniuse.com

上的兼容性

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

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

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

修改：

我偶然发现了Hagenburger（gist）的这个according blog-post，它应该实现您想要为旧浏览器实现的行为。注意：它是jQuery - 代码，不确定你是否使用它，但即使不是，它应该给你一个想法，该怎么做。

所以，鉴于兼容性 - 从上面检查：

if(!placeHolderSupport){ //gist code here (not sure if i'm allowed to copy this into my answer) }
像这样，将使用浏览器的本机占位符实现，如果存在，否则，JavaScript函数将处理此问题。

更新09/11/2012

SO-User和主持人ThiefMaster刚刚指出了Mathias Bynens提供的更好更新的jQuery插件，它已经内置了placeholder支持。当然，实施占位符回退的方法比我发布的要点更好：

jQuery Placeholder at github

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

参见示例quick and dirty example here。

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

3 个答案: