logo标签列表

Chrome加载时的价值

javascriptjquerygoogle-chrome
18

我在使用Chrome浏览器时遇到问题，当它记住密码、用户名等信息时，我无法检查输入字段是否为空。 我使用以下代码，但是if语句在Chrome中不起作用，而在所有其他浏览器中均正常工作。

$(document).ready(function() {    
    $('.inputWithLabel').each(function(){
        if ($(this).val().length != 0){
            var element_id = $(this).attr('id');
            $('label[for="' + element_id + '"]').addClass('inputWithText');
        }
    });
});

我试图修改以下标签

<form action="" method="post">
    <div class="divInputLabel inputLabel">
        <label class="labelInput" for="username">Brugernavn*</label>
        <input class="inputLabel inputWithLabel" id="username" name="username" type="text">
    </div>
    <div class="divInputLabel inputLabel">
        <label class="labelInput" for="password">Adgangskode*</label>
        <input class="inputLabel inputWithLabel" id="password" name="password" type="password">
    </div>
    <div class="divInputLabel inputLabel">
        <label class="labelInput" for="password_again">Gentag adgangskode*</label>
        <input class="inputLabel inputWithLabel" id="password_again" name="password_again" type="password">
    </div>
    <div class="divInputLabel inputLabel">
        <label class="labelInput" for="first_name">Fornavn*</label>
        <input class="inputLabel inputWithLabel" id="first_name" name="first_name" type="text">
    </div>
    <div class="divInputLabel inputLabel">
        <label class="labelInput" for="last_name">Efternavn</label>
        <input class="inputLabel inputWithLabel" id="last_name" name="last_name" type="text">
    </div>
    <div class="divInputLabel inputLabel">
        <label class="labelInput" for="email">Email*</label>
        <input class="inputLabel inputWithLabel" id="email" name="email" type="text">
    </div>
    <div class="divInputLabel inputLabel">
        <input type="Submit" class="submit-button" value="Registre">
    </div>
</form>

我希望有人能帮助我。

1
如果浏览器预先填充了它，那么它就不是空的。预期的行为是什么？当页面加载时 - 您想重置所有字段吗？ - Yuriy Galanter
可能Chrome会在加载文档后的一段时间内插入保存的用户数据。尝试使用超时来检查字段。 - CnapoB
4
我相信Chrome在预填表单元素时会触发“change”事件。您可以尝试捕获它一次以重置这些值。 - Yuriy Galanter
1
Yuriy Galanter是正确的，我添加了这个 $（'.inputWithLabel'）.change（ function（）{ var element_id = $（this）.attr（'id'）; $（'label [for ="'+element_id+'"]'）.addClass（'inputWithText'）; }）; 它在Chrome中有效。 - user3805674
这些文本字段在页面加载时有值吗？ - Sindhoo Oad
显示剩余4条评论
10个回答
1

目前无法检测浏览器自动填充表单的情况。以下是我建议的一些替代方案：

禁用自动填充：如果您不需要自动填充，这将是一个简单的解决方案。

<input autocomplete="off">

或者在整个表单中：
<form autocomplete="off">

使用change事件检测字段上的任何更改：

$('#username').on('change keyup',function(){
    // to something
});

如果输入字段发生任何更改，我可以想象设置一个类，例如：

$('#username').on('change keyup',function(){
    $(this).addClass('changed');
});

或者更改提交字段的名称属性。例如：将此用作默认值：

<input class="inputLabel inputWithLabel" id="username" name="usernameAutofill" type="text">

如果对输入进行了任何更改，则稍后将其更改为此内容：
$('#username').on('change keyup',function(){
    $(this).attr('name', 'username');
});

但在此之前，请问自己以下问题： 为什么要验证这些字段？ 如果它们被自动填充，应该发生什么？ 如果它们为空，应该发生什么？ 如果它们被常规填充，应该发生什么？

因为最好的解决方案很大程度上取决于您要做什么。 如果您回答了这个问题，我们可以更好地帮助您。

1
为了检查输入是否为空，您可以做一些更简单的事情，如下所示。
$(document).ready(function() {
    $(".inputWithLabel").change(function() {
        if ($(this).val() == null || $(this).val() == "") {
            alert("Input is null!");
        } else {
            alert("Input is valid");
        }
    });
});
1
不要改变你的代码，使用这个代替：
$(document).ready(function() {

    $('.inputWithLabel').each(function(){
        if ($(this).val().length != 0 && $(this).val().length != null){
            var element_id = $(this).attr('id');
            $('label[for="' + element_id + '"]').addClass('inputWithText');
        }
    });
});

只有在 $(this).val().length != 0 的情况下，才设置 && $(this).val().length != null，并且它应该在不同的浏览器上运行。试试吧！

1
尝试以下代码：

    $(document).ready(function() {
      $('body .inputWithLabel').each(function(){
        if ($(this).val().length != 0){
          var element_id = $(this).attr('id');
          $('label[for="' + element_id + '"]').addClass('inputWithText');
        }
      });
   });

只需在每个循环中附加body，即$('body .inputWithLabel')。
1

试试这个：

$(document).ready(function() {

    $('.inputWithLabel').each(function() {
        if ($(this).val()) {
            var element_id = $(this).attr('id');
            $('label[for="' + element_id + '"]').addClass('inputWithText');
        }
    });
});

1
你的代码看起来很好... 标签没有.val().. 如果我们想要标签的innertext，应该使用.text() 所以用.text()替换.val()，希望它能正常工作... 还有首先将body追加，即
$('body .inputWithLabel')
1

我之前试过类似的事情。你需要先把表单id转换成jQuery变量，

var $elem = document.getElementById("yourformid").value; //make sure your id has no # symbol
if ($elem > 0) {
    //do stuff
}

那应该可以工作。
1

您可以在您的网站中尝试它

$('.inputWithLabel').each(function() {
    if ($(this).val() !== null && $(this).val() !== "") {
        var element_id = $(this).attr('id');
        $("#" + element_id).removeClass('inputWithLabel').addClass('inputWithText');
    }
});
-2

尝试使用：

$('').value

或者

this.value

或者

this.textContent

或者

$('').innerHTML
-2

你的代码正在检查每个具有值的输入元素，而不是空的元素。 尝试将你的条件更改为：

if ($(this).val().length == 0){
...

这将向空字段标签添加类。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接