前端坑多：使用js模擬按鍵輸入的踩坑記錄

坑

一開始在Google搜索了一番，找到了用jQuery的方案，代碼量很少，看起來很美好很不錯，結果，根本沒用……

我反復試了這幾個版本：

var e = $.Event('keyup')
e.keyCode = 49
$('#btn').trigger(e)

// 就是把 keycode 換成 which
$('#btn').trigger($.Event('keyup', { which: 49 }))

一點用都沒有……

然后又通過開發者調試工具看 event listener，發現輸入框監聽了input事件，我就試試先設置input的value，然后jQuery模擬觸發事件能不能~

$('#btn').trigger('input')

結果也不行

解決

然后找到一個比較好的方法，使用js原生的InputEvent，如果是比較舊的Chrome，就用UIEvent代替，效果基本一樣。

代碼如下

使用InputEvent：

var dom = document.querySelector('#selector')
var evt = new InputEvent('input', {
    inputType: 'insertText',
    data: st,
    dataTransfer: null,
    isComposing: false
});
dom.value = '輸入的內容';
dom.dispatchEvent(evt);

使用UIEvent：

var dom = document.querySelector('#selector')
var evt = new UIEvent('input', {
    bubbles: false,
    cancelable: false
});
dom.value = st;
dom.dispatchEvent(evt);

親測可以完美實現

可以自己封裝成函數比較方便調用，這部分代碼就不貼了~

參考資料

• 有用的參考資料：http://fengyitong.name/index.php/archives/38/
• js+JQuery模擬鍵盤輸入：https://blog.csdn.net/qq_45741976/article/details/102645358
• 簡單獲取keycode的網站：https://keycode.info/

歡迎交流

程序設計實驗室專注於互聯網熱門新技術探索與團隊敏捷開發實踐，在公眾號「程序設計實驗室」后台回復 linux、flutter、c#、netcore、android、kotlin、java、python 等可獲取相關技術文章和資料，同時有任何問題都可以在公眾號后台留言~

• 博客園：https://www.cnblogs.com/deali/
• 打代碼直播間：https://live.bilibili.com/11883038
• 知乎：https://www.zhihu.com/people/dealiaxy