0 
<form id="commentform" method="post" action="wp-comments-post.php">
    <input type="text" aria-required="true" tabindex="1" size="22" value="" 
       id="author" name="author">
</form>

我将默认值“访客”设置为输入框。当焦点在文本框中或鼠标进入它时，我想隐藏“访问者”字符串并希望在失去焦点或鼠标移出时显示它。

4

5 回答 5

1

尝试使用 HTML5 占位符属性：

<input type="text" aria-required="true" tabindex="1" size="22"
    placeholder="visitor" id="author" name="author">

虽然浏览器支持还不是 100%，但这将为您提供一种标准方法来实现您想要实现的目标，而无需经过不必要的麻烦。

您可以尝试的另一件事是将输入元素覆盖在某些文本上，并在未聚焦时使其透明/半透明，而在聚焦/填充时使其不透明。

截至今天，Tumblr的登录页面使用了这个技巧：

<div class="input_wrapper" id="">
    <label for="user_password">Password</label>
    <input type="password" id="user_password" name="user[password]" data-validation-type="password" value="">
</div>

通过 CSS 魔法，这变成：

在此处输入图像描述

于 2011-03-16T03:51:00.873 回答
1

看起来您正在使用 WordPress，因此您的网站上有 jQuery 库。

您可以使用我的jQuery 插件来实现这一点。

例子

例子

jQuery

$('#author').inputLabel({
   customLabel: 'Visitor'
});

在这种情况下，我必须自己指定标签，但是插件通过查找 的相关label元素来工作而无需此标签，该元素input应该存在于可访问性中。

js小提琴。

于 2011-03-16T04:04:02.110 回答
0

如果您已达到 HTML 5，请尝试以下操作：

<script type="text/javascript">
var prompt="visitor";       
var txt=document.getElementById("author");
txt.onfocus=function(){txt.value='';}
txt.onblur=function(){
            if(txt.value==''){
                txt.value=prompt;
            }
        }
</script>
于 2011-03-16T04:04:13.643 回答
0

Ates Goral 的回答看起来很有趣。请先试一试。如果您不想出汗，这是另一种选择..:)
我建议使用水印插件。有很多可用的。
以前用过这个插件。工作正常。给你很好的控制。
该插件需要 jQuery

于 2011-03-16T04:05:07.117 回答
0

虽然我也会使用 jQuery 或 CSS 和伪类 (:focus)....

这是一个简单的 JS 解决方案，可以完全满足您的需求。同样，我不建议将这种方法用于超过一个或两个输入字段。

<input type="text" value="Visitor" onFocus="this.value='';" onBlur="this.value='Visitor';" id="author"/>

于 2011-03-16T04:11:06.223 回答