文本字段 - onLoad '用户名/密码'，onClick/Focus 更改颜色，onKeyDown 消失(类似于 Twitter)

Question

我正在使用简单的电子邮件字段和密码字段进行登录。我拥有我想要的所有基础知识，但我无法将它们全部放在一起。我想要的是文本字段与推特相同的外观。我的意思是，当两个字段未被选中时，他们说"电子邮件"和"密码"但是，当它们被选中时，文本是不可选择的，光标出现在前面。一旦你输入，它们就会消失，你输入的任何内容都会出现。

最简单的解决方案就是向它们添加背景图像。我已经这样做了，但不想要这个外观。 这对我来说不够精确。

如果您对我正在寻找的内容感到困惑，请访问Twitter并查看他们的登录字段，其中他们说用户名/密码。 我想要同样的外观。 任何帮助都非常感谢。谢谢。

如果可能的话，请以HTML，CSS或JavaScript提供，但任何解决方案都是值得赞赏的。

Answer 1

<script type="text/javascript">
function clearInput(this) {
    var currValue = document.getElementById(this).value;
    if (currValue != '') {
        currValue = '';
    }
}
</script>
<input type="text" id="login" value="email" class="input-box" onchange="clearInput(this);">
<input type="password" id="password" value="password" class="input-box" onchange="clearInput(this);">

这没有经过测试应该工作....

您可以使用任意数量的JS事件，因此您必须选择提供所需时间的事件。

希望这有帮助。

Answer 2

尝试在输入上使用placeholder="your placeholder"？

然后，您可以使用回退 jQuery 脚本为旧版浏览器提供功能

Answer 3

首先，javascript....如果您使用的是jQuery，则应该获取文本字段并在单击它们时删除其中的值（电子邮件等）并使它们成为焦点。

 $(function() {
    $('input[type=text]').focus(function() {
     $(this).val('');
    });
 });

你的html应该看起来像这样。

<input type="text" name="email" value="email"/>
<input type="password" name="password" value="password" />

要获得边框突出显示效果，您可以添加一些css。请注意，本示例将在所有输入（文本字段、文本区域等）聚焦时在其周围添加绿色边框。您可以通过使用 id 或指定输入类型来更改此设置。

input:focus { border: 1px solid green;}

如果您尝试让默认文本在按下键下而不是焦点上消失，一种方法是为每个输入提供一个 ID，然后使用标志检查事件处理程序（例如文本消失）是否已在每个 ID 上触发......

 $(function() {
    var passFired = false;
    var emailFired = false;
    var email = $('#email');
    var pass = $('#password');
    email.keydown(function() {
        if(!efired){
            efired = true;
            $(this).val('');
        }
    });

    pass.keydown(function() {
        if(!pfired){
            pfired = true;
            $(this).val('');
        }
    });
});