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

【问题标题】：jQuery form input field present even before document.ready function is calledjQuery 表单输入字段甚至在 document.ready 函数被调用之前就已经存在
【发布时间】：2017-06-21 21:59:32
【问题描述】：

我遇到了一个奇怪的问题。我对 JavaScript jQuery 比较陌生。

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

我试过$('#input_address').get(0).value=''; 这清除了该领域。但我不希望当用户从第 2 页返回到第 1 页时发生这种情况。只有在刷新时才能清除这些字段。电子邮件和邮政编码在两种情况下都能完美运行：刷新页面和 page2 到 page1 导航。

$(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>

【问题讨论】：

我们也来看看 HTML。
请点击<> 并创建一个minimal reproducible example 但是你为什么要经历这么多麻烦？默认占位符功能有什么问题？
更新了地址 HTML。 @mplungjan 默认占位符弄乱了标签。两者同时出现
我创建了你应该创建的 sn-p。请解释我正在查看的代码有什么问题？是否缺少一些 CSS 可以帮助我们了解问题所在？
您无法轻易检测到重新加载。我会将字段包装在一个表单中，并在我想清除它时执行$("form")[0].reset()

标签： javascript jquery html css material-design

【解决方案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 可以正常运行子函数，从而使系统有时间在自动上工作-completion 然后调用你的函数。使用 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 并调用重置函数（也可能是刷新是默认值，您不想处理该按钮，因为它会按预期清除。）

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

【讨论】：