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

Question

嗨，假设有一个简单的一般形式。

<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事件一次。可能吗？

Answer 1

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

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

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

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

Answer 2

您可以通过全局设置变量来实现此目的，我使用了 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>

Answer 3

为每个对象绑定相同的chagne事件，触发后解除所有change事件的绑定。

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

Answer 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>

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

Fire form change event from any input (only once)

jquery

input

onchange