0

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

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

如果您对我要查找的内容感到困惑，请访问 twitter 并查看他们说用户名/密码的登录字段。我想要同样的样子。任何帮助是极大的赞赏。谢谢你。

如果可能，请以 HTML、CSS 或 JavaScript 形式给出，但我们感谢任何解决方案。

4

3 回答 3

0

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

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

于 2012-06-12T19:58:42.970 回答
0

首先，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;}

如果您试图让默认文本在 keydown 而不是焦点上消失，一种方法是给每个输入一个 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('');
        }
    });
});
于 2012-06-12T20:05:44.510 回答
0 
<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 事件，因此您必须选择能够提供所需时间的事件。

希望这可以帮助。

于 2012-06-12T20:49:31.417 回答