Javascript 文本字段-onLoad'；用户名/密码'；，onClick/Focus改变颜色，onKeyDown消失（类似于Twitter）

我正在使用一个简单的电子邮件字段和密码字段登录。 我有我想要的所有基本知识，但我不能把它们都放在一起。 我想要的是与twitter相同的文本字段外观。 我的意思是，当这两个字段没有被选中时，它们会说“Email”和“Password” 但是当它们被选中时，文本是不可选择的，光标出现在前面。 你一打字，它们就消失了，你键入的任何东西都会出现

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

如果你对我要找的东西感到困惑，请转到twitter，查看他们的登录字段，其中显示用户名/密码。我想要同样的样子。非常感谢您的帮助。 多谢各位

---

如果可能的话，请以HTML、CSS或JavaScript格式给出，但任何解决方案都值得赞赏。

请尝试在输入上使用

placeholder=“your placeholder”

---

然后，您可以使用回退jquery脚本为较旧的浏览器提供功能，首先是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" />

如果您试图让默认文本在按键下而不是焦点上消失，一种方法是给每个输入一个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('');
        }
    });
});

函数clearInput（此）{
var currValue=document.getElementById（this）.value；
如果（currValue！=''）{
currValue=''；
}
}

这不是测试应该工作

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

---

希望这有帮助。

更多的搜索结果是：是的，IE是一个相当痛苦的东西，但我想这就是这些jquery脚本派上用场的地方，只需使用IE条件标记将脚本包含在标题中，这应该为所有那些旧浏览器提供占位符功能，大约IE6:）谢谢，但我已经走了这么远。。。我一直在寻找这个，但是文本直到你输入后才会消失，我以前使用的是onKeyDown。。。但我也不希望文本可以选择，但这又带来了另一个问题。还有什么建议吗？谢谢，但我已经走了这么远。。。我一直在寻找这个，但是文本直到你输入后才会消失，我以前使用的是onKeyDown。。。但我也不希望文本可以选择，但这又带来了另一个问题。还有什么建议吗？如果你查看twitter，日志“效果”正是我想要的。当你点击时，请特别注意“用户名”和“密码”这两个词，然后键入。您好，twitter似乎使用了一个span来将文本保存在包含输入字段的div中。这将侦听一个向下键，然后使span.innerHTML=''；希望这有帮助。今天晚些时候我会试着写一个答案。所以他们只是在文本字段上放置了一个跨距？是的，我想象父div是相对的绝对位置。好的，我可以试试。绝对位置输入字段上的跨度就是你说的，对吗？

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

<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);">