即使在调用document.ready函数之前，jQuery表单输入字段也存在

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()语句。

在这方面this stackoverflow page有几个黑客攻击。但是，我不确定你在新加载的页面中真正知道你有一个刷新或后退按钮点击。

从我看到的代码中，加载页面的内容将100％发生在AJAX中，因此您完全知道单击了哪个按钮，您只需重新实现该功能。您将不得不再搜索stackoverflow以了解如何执行此操作。我强烈建议你一次用一个功能编写测试来确定发生了什么。

请注意，将初始化函数分开非常有用，因为重新加载页面后，您将负责调用该函数（当您希望重置时）或不执行此操作！换句话说，如果单击“后退”按钮，则加载上一页的HTML（即示例中的第1页）并显示它。完成。单击“刷新”按钮时，加载当前页面的HTML并调用重置函数（也可能是“刷新”是默认值，您不想处理该按钮，因为它无论如何都会按预期清除。）

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