从任何输入触发表单更改事件（仅一次）答案

【问题标题】：Fire form change event from any input (only once)从任何输入触发表单更改事件（仅一次）
【发布时间】：2019-12-18 02:43:56
【问题描述】：

你好，假设有一个简单的通用形式。

<form id="first_form">
  <div>
    <input type="text" id="first_name" name="first_name"></input>
  </div>
  <div>
    <input type="text" id="last_name" name="last_name"></input>
  </div>
  <div>
    <input type="email" id="email" name="email"></input>
  </div>
  <div>
    <input type="password" id="password" name="password"></input>
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>

现在基本上，我想知道用户是否从任何输入开始编辑表单。所以只需要触发change事件一次。有可能吗？

【问题讨论】：

标签： jquery input onchange

【解决方案1】：

您可以通过全局设置变量来实现这一点，我使用了formState，它在 on change 函数之外。

找到#first_form内的所有输入，如果其中一个被修改，则更改变量值并将其用于条件。

var formState = 0;

$("#first_form").find("input").on("change", function() {

  if (formState) {
    // do nothing
  } else {
    alert("Edited first time");
    $("p").html("State: Edited");

    // Trigger events here
  }

  // Change state
  formState = 1;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>State: Unedited</p>

<form id="first_form">
  <div>
    <input type="text" id="first_name" name="first_name"></input>
  </div>
  <div>
    <input type="text" id="last_name" name="last_name"></input>
  </div>
  <div>
    <input type="email" id="email" name="email"></input>
  </div>
  <div>
    <input type="password" id="password" name="password"></input>
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>

【讨论】：

Tks Jardine 这就是我想要的。简约优雅

【解决方案2】：

将相同的 chagne 事件绑定到每个对象，并在触发后取消绑定所有更改事件。

$("#first_name, #last_name, #email, #password").one("change", function(){
    console.log("you changed.")
    $("#first_name, #last_name, #email, #password").off("change");
})

【讨论】：

【解决方案3】：

您可以在输入上添加onfocus 或onchange 事件，例如：

$('input').on('focus', function() {
   //Do Somethig
});

$('input').on('change', function() {
   //Do Somethig
});

当用户将鼠标光标放在您的输入中时，将触发此事件。

【讨论】：

【解决方案4】：

$("#first_name").on("change", function(){
        console.log("first_name on change called");
    })
$("#first_form").on("change", function(){
        console.log("first_form on change called");
        $("p").html("State: Edited");
        $("#first_form").off("change");
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>State: Unedited</p>

<form id="first_form">
  <div>
    <input type="text" id="first_name" name="first_name"></input>
  </div>
  <div>
    <input type="text" id="last_name" name="last_name"></input>
  </div>
  <div>
    <input type="email" id="email" name="email"></input>
  </div>
  <div>
    <input type="password" id="password" name="password"></input>
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>

【讨论】：

对关闭一无所知。有用，但如果我需要为任何输入触发不同的更改事件，它将被阻止。 Tks
子元素上的更改事件仍将开启.. 更新了 sinppt.. $("#first_name").on("change", function(){ console.log("first_name on change called"); })