很多情况下需要向表单输入事件添加绑定, 监听的事件主要是 "input" 和 "change" 两个. 此二者在功能和行为上存在诸多不同.

辨析

"input" 事件在输入框值发生改变时触发, 比如文本 ("text") 输入框输入或删除文字, 选择 ("select") 输入框值改变等, 但要注意 "input" 事件不能监听复选框 ("checkbox") 选项变化, 要监听复选框选项变化, 要借助 "change" 事件.

"change" 事件, 如上所述, 能够监听复选框选项变化. 此外, "change" 事件亦可监听其他类型输入框输入, 但与 "input" 事件不同, "change" 事件不监听实时输入 (针对文本输入框) , 只有在输入框失去焦点时才触发, 这种行为使 "change" 事件可以实现与 "input" 事件不同的响应需求.

实例

检测字数

若一个输入框设置了字数限制. 相较于每次提交时由检查字数, 随用户输入提示字数是否超限可以提供更及时的反馈.

$("#input").on("input", function () {
  // 捕捉事件并响应
});

监听复选框值变化

$("#checkbox").on("change", function () {
  // 捕捉事件并响应
});

卸载提示

在表单任意值发生变化而未上传时提供卸载提示是典型的业务场景. 可以同时绑定 "input" 和 "change" 两个事件, 以检测整个表单的变化.

$("#form").on('input change', function () {
  window.onbeforeunload = function () {
    return "表单尚未上传, 确认关闭吗?";
  }
});