解决删除input输入框中剩余的最后一个字符时input事件、change事件以及blur事件不触发的问题

问题背景

  项目中需要根据用户在input输入框中输入的数据实时计算总的数据。笔者采用的方式是让浏览器侦听输入框的input事件,当用户输入数据时input事件被触发,通过事件处理函数实时计算总数据。然而,当用户删除输入框剩余的最后一个字符时(此时输入框为空),input事件没有被触发,此时并不能实时更新总数据。采用change事件blur事件替换input事件之后具有相同的问题。

问题产生原因

  删除input输入框剩余的最后一个字符不触发inputchangeblur事件应该是浏览器自身的特性,可以采用其他方式来实现实时计算功能。

问题解决方案

  经过笔者的一番探索,最终的解决方案是侦听input输入框的keydownkeyup事件,当用户输入数据时按键按下(抬起)就会触发keydownkeyup)事件。采用该方法可以解决上述input事件change事件以及blur事件不触发的问题。