Question

HTML：

<form action="login.php" method="post" id="login-form">
    <div class="field">
        <input name="email" id="email" type="text" class="text-input" value="E-mail" />
    </div>

    <div class="field">
        <input name="code" id="code" type="password" class="text-input" />
        <div id='codetip'>Access Code</div>
        <label class="error" for="code" id="code_error"></label>
    </div>
    <br />
    <div class="container">
        <a id="submit" class="link-2">Access</a>
     </div>
</form>

CSS：

a {
    border: solid 1px #777;
    padding:5px;
}
#codetip {
    position:absolute;
    margin-top:-20px;
    margin-left:5px;
}

使用Javascript：

$('#email').focus(function(){
    if($(this).val()=='E-mail'){$(this).val('');}
});
$('#email').blur(function(){
    if($(this).val()==''){$(this).val('E-mail');}
});

$('#code').focus(function(){
    $('#codetip').hide();
});
$('#code').blur(function(){
    if($(this).val()==''){$('#codetip').show();}
});

$('#codetip').click(function(){
    $(this).hide();
    $('#code').focus();
});

$('#submit').click(function(){
    $(this).submit();
});

问题是，当Chrome密码管理器保存您的密码并在您选择电子邮件时为您预先填写密码时，至少在Chrome中（尚未尝试其他浏览器）。我使用jquery隐藏/显示密码输入字段顶部的div作为标签，当用户点击密码字段时隐藏该div（如上面的jsfiddle代码中所示）。当Chrome预填密码字段时，我需要知道如何隐藏该div ...

Answer 1

我自己没有碰到这个问题，但基于一些快速的Google搜索，这似乎是一个常见的问题。

你可以做的一件容易的事就是设置一些代码，通过setInterval每秒或每两秒运行一次，并检查该字段是否有值。

像这样......

var code = $('#code');
var codeTip = $('#codetip');
var interval = setInterval(function(){
    if (code.val()!=''){
        codeTip.hide();
        clearInterval(interval);
    }
}, 1000);

Answer 2

我有同样的问题。我找到的所有解决方案都没有做得很好。我最终得到了这个：

如果你的输入字段有背景并不重要，我只用CSS处理它。

jsfiddle

我刚给了.inputPlaceholder { z-index: -1; }，使其在输入字段后面对齐，然后设置input { background: transparent; }，这样你就可以看到它背后的div。

Google的默认-webkit-autofill样式具有黄色背景，因此只是掩盖了占位符背后的所有内容。无需乱搞自定义插件/事件/ setIntervals。

如何绑定浏览器更改输入字段？（jQuery的）

2 个答案:

如何绑定浏览器更改输入字段？ （jQuery的）

2 个答案:

如何绑定浏览器更改输入字段？（jQuery的）