jQuery表单输入字段甚至在document.ready函数被调用之前就存在

Question

我面临一个奇怪的问题。 我对JavaScript jQuery比较陌生。

当我刷新页面时，不会清除地址输入字段，而会清除邮政编码和电子邮件字段。

我尝试了$('#input_address').get(0).value=''; 这清除了领域。 但是我不希望用户从第2页回到第1页时发生这种情况。只有在刷新时才应清除字段。 电子邮件和邮政编码在两种情况下均能完美工作：将页面和页面2导航到页面1导航。

 $(document).ready(function() { console.log("doc ready function"); // $('#input_address').get(0).value=''; // togglePlaceholder($('#input_email').get(0)); // togglePlaceholder($('#input_zip').get(0)); togglePlaceholder($('#input_address').get(0)); $('input, select, textarea').each( function() { var val = $(this).val().trim(); if (val.length) { $(this).addClass('sample'); } }); $('input, select, textarea').blur(function() { if ($(this).val()) $(this).addClass('sample'); else $(this).removeClass('sample'); }); $('input, select, textarea').focus(function() { console.log("focused"); if ($(this).val() == '') { $(this).removeClass('invalid'); $(this).addClass('sample'); } }); }) function togglePlaceholder(inputElement) { var inputAttr = inputElement.getAttribute("placeholder"); inputElement.placeholder = ""; inputElement.onblur = function() { this.placeholder = ""; } inputElement.onfocus = function() { this.placeholder = inputAttr; } } 

 .sample ~ label { font-size: 1em; top: -10px; left: 0; font-size: 1em; color: #F47B20; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="input-field col s6 col-xs-12"> <input type="text" onblur="togglePlaceholder(this);" onfocus="togglePlaceholder(this);" placeholder="123 Example Street" id="input_address" /> <label for="input_address">Street Address</label> </div> 

Answer 1

所以...您有两个问题。

（1）自动完成是自动填充小部件的功能，

（2）您需要知道单击了哪个按钮才能做出相应的反应。

自动完成

关于自动完成，最肯定的情况是在第一组脚本在jQuery ready()函数中运行之后立即发生。

有两种删除自动完成的方法，但是实际上，我不建议使用其中任何一种，尽管我想如果您的要求是固定的，您将需要...

（a）要求输入小部件甚至无法自动完成

<input ... autocomplete="off" .../>

（b）使用计时器运行脚本，以便脚本在自动完成后发生。 您无需在ready()函数中进行初始化，而可以在计时器超时后运行的子函数中进行初始化。

$(document).ready(function() {
    setTimeout(function(){
        // ...put your initialization here...
        // the autocompletion data should have been taken care of at this point
    }, 0);
});

请注意，您可以使用大于0的数字作为超时延迟，但是在大多数情况下，释放当前线程一次后，0将可以很好地运行子功能，从而为系统提供了时间来完成自动完成和然后调用您的函数。 设置为0时，它应该是如此之快，以至于您甚至都不会看到<input .../>标签闪烁。

注意：您可能还想将内部函数放置在实际函数中，如下所示：

function init_stuff()
{
    // ...your initialization code goes here...
}

$(document).ready(function() {
    setTimeout(init_stuff, 0);
});

如果您希望初始化继续增长，那么长期来看这可能会更干净。

单击哪个按钮

下一个问题是知道该代码是否应该运行。 因此，为此您需要一个额外的if()语句。

在这方面， 此stackoverflow页面上有一些技巧。 但是，我不确定在新加载的页面中如何真正知道您是否单击了“刷新”或“后退”按钮。

从我在那里看到的代码中，页面内容的加载将100％在AJAX中进行，因此，您完全知道单击了哪个按钮，便重新实现了功能。 您将不得不搜索stackoverflow来找到更多方法。 我强烈建议您一次编写具有一项功能的测试以确定正在发生的事情。

请注意，这将使初始化函数变得非常有用，因为在重新加载页面之后，您将负责调用该函数（当您希望进行重置时）！ 换句话说，如果单击了“后退”按钮，请加载上一页的HTML（即示例中的第1页）并显示它。 完成。 单击“刷新”按钮时，加载当前页面的HTML并调用reset函数（也可能是“刷新”是默认按钮，并且您不希望处理该按钮，因为它还是会按预期清除。）

对于初学者来说，这将是一件有趣的工作！