Chrome扩展popup内input的change事件值变更不触发、点击搜索图标才触发问题

问题原因 #

change事件本身的触发机制并非输入值实时变化时触发，它的触发条件是：input元素失去焦点，且值和获得焦点时相比发生了变化。
你遇到的现象完全符合该逻辑：

• 输入过程中input始终持有焦点，所以不会触发change事件
• 点击搜索图标时，input会失去焦点，此时如果值有变化就会触发绑定的change回调，这就是点击图标触发事件的原因，和搜索图标本身有没有绑定监听器没有关系。

解决方案 #

可以根据你的业务需求选择对应方案：

方案1：需要输入值实时变化就触发回调 #

把事件替换为input事件，只要输入框的值发生变化（覆盖键盘输入、粘贴、剪切等所有修改值的操作）就会立即触发，不需要等待失焦：

$(".search").on('input', function() {
    console.log($(this).val());
});

方案2：确实需要使用change事件的场景 #

如果业务逻辑要求用户完成输入、确认离开输入框后才执行回调，可以保持change事件的绑定，同时给搜索图标补充点击触发逻辑即可：

// 点击搜索图标主动执行搜索逻辑
$('.search-icon').click(function() {
  const keyword = $('.search').val().trim();
  console.log(keyword);
  // 补充你的业务逻辑
})

额外注意事项 #

如果后续遇到事件绑定失效的情况，要确认事件绑定代码是在popup的DOM完全加载完成后执行的，jQuery环境下可以用ready方法包裹：

$(function() {
  // 所有事件绑定代码都放在该区域内
  $(".search").on('input', function() {
    console.log($(this).val());
  });
})

内容的提问来源于stack exchange，提问作者Mohammed raeesul irfan