通过JS修改input值后change事件未触发的问题求助

这问题我做项目时也踩过坑！当你用$("input").val("1")这种方式通过JS直接修改输入框值的时候，浏览器默认不会自动触发change、keyup这类用户交互事件——因为这些事件本来就是为用户手动操作（比如打字、点击输入）设计的。不过有几个简单直接的办法能搞定这个问题：

方法1：修改值后手动触发事件 #

在调用val()更新值之后，用.trigger()方法手动触发你需要的事件。比如要触发change事件，代码可以改成这样：

function write(){ 
  $("input").val("1").trigger("change"); 
}

如果需要同时触发keyup、keydown这些事件，直接链式调用就行：

function write(){ 
  $("input").val("1")
        .trigger("keydown")
        .trigger("keyup")
        .trigger("change"); 
}

方法2：用简洁的语法糖简化操作 #

jQuery提供了和.trigger()等价的简写方法，比如.change()就对应.trigger("change")，写法更清爽：

function write(){ 
  $("input").val("1").change(); 
}

如果要触发keyup就用.keyup()，触发keydown就用.keydown()，逻辑完全一致。

为什么会出现这个问题？ #

浏览器的原生交互事件（比如change、keyup）只有在用户进行实际操作时才会被自动触发。而通过JS代码直接修改输入框的value属性（val()方法底层就是干这个的）属于“静默修改”，不会触发这些事件，所以必须通过手动触发的方式来让绑定的事件处理函数执行。

内容的提问来源于stack exchange，提问作者Miguel Ramirez