前阵子在调一个 bug
的时候遇到一个很坑的问题,在判断一个输入框是否有用户输入时触发 updateModel
操作,并向后台发送 PUT
请求,结果调试时一直调不通,最后才发现的因为当用户输入 #
后系统判断这是个 tag
标签,因此通过 val
方法直接修改了输入框的内容,而通过 val
方法修改内容并不能触发绑定在输入框上的 change
方法。写个类似的简单例子如下:
<input type="text" />
jQuery
代码如下:
$('input[type="text"]').change(function() {
alert('input something!');
})
$('input[type="text"]').val('test');
上面这段通过 val
直接修改 input
内容的方法并不能触发 change
事件内的处理程序 alert
。
查看 jQuery API
上 change
方法被触发的原因是:
The change event is sent to an element when its value changes.
但是通过 val
方法直接修改元素的值并不能触发 change
事件,只有当用户真实输入并改变 input
框的内容时才有效。当时我的做法是:
$('input[type="text"]').val('test').change();
但是这种硬改的方法会显得代码有些 hard code
。对于其他情形下,我们需要模拟用户真实操作时应该用什么方法进行统一处理呢?
模拟用户操作
假设我们需要模拟用户的 click
操作,例如:
<button>test</button>
jQuery
代码如下:
$('button').click(function() {
alert('click!');//
})
此时,如果我们点击 button
的话,肯定能触发 alert
。但是假设我们希望能模拟用户的 click
操作,则需要用到 trigger
方法,修改代码如下:
$('button').click(function() {
alert('click!');//
})
$('button').trigger('click');
此时,不需要用户进行点击操作,通过 trigger('click')
已经模拟了一次用户的 click
操作。
此时,再回到刚开始的那个例子,我们就可以写成:
$('input[type="text"]').val('test').trigger('change');
模拟用户操作也可以应用于当用户做出 A
操作时,模拟出用户 B
操作,例如虚拟键盘,当用户使用鼠标点击虚拟键盘上的按键时,模拟用户键盘上的真实操作。