js 模拟回车 模拟键盘，给input框输入值 触发回车事件_js模拟键盘输入

1. 使用js模拟按键输入的踩坑记录
   https://zhuanlan.zhihu.com/p/356661173

a)

				  let element = document.querySelector('#search') 	// input输入框
				  element.value = '文本内容'  						// 输入的内容
				  var event = new Event('input', {
				      'bubbles': true,
				      'cancelable': true
				  })
				  element.dispatchEvent(event)
1
2
3
4
5
6
7

b)

				$('.simple-input').val('abc').trigger('change')
				let elem = window.document.getElementsByClassName('simple-input')  // input输入框
				window.inputValue = function (dom, st) {
				    var evt = new InputEvent('input', {
				        inputType: 'insertText',
				        data: st, // 输入的内容
				        dataTransfer: null,
				        isComposing: false
				    })
				    dom.value = st
				    dom.dispatchEvent(evt)
				}
				window.inputValue(elem, '123') 
1
2
3
4
5
6
7
8
9
10
11
12
13

c)

			   var element_input = window.document.querySelector('input') // input输入框
			   var _templMethod = element_input._valueTracker.getValue
			   var _templMethod = element_input.getValue
			   element_input._valueTracker.getValue = () => ''
			   element_input.value = '123' // 输入的内容
			   var event = new InputEvent('input', {
			       'bubbles': true,
			       'cancelable': true,
			   })
			   element_input.dispatchEvent(event)
			   element_input._valueTracker.getValue = _templMethod
1
2
3
4
5
6
7
8
9
10
11

2. 仅模拟回车事件
   https://juejin.im/post/6844904128305430541

   键盘键值对照表:
   https://blog.csdn.net/geekswg/article/details/120246209

   原文参考：
   http://wjhsh.net/robinunix-p-13685771.html
   https://www.cnblogs.com/robinunix/p/13685771.html

   浏览器兼容:
   https://www.bbsmax.com/A/KE5QpEnjJL/

   官方文档:
   https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/initKeyEvent

   正确方法:
   https://www.cnblogs.com/gisblogs/p/5821665.html

a)

				let keyboard = document.querySelector('#search') // 元素
                let ke = new KeyboardEvent('keypress', {
                    bubbles: true, cancelable: true, keyCode: 13
                })
                keyboard.dispatchEvent(ke)
1
2
3
4
5

b)

				let keyboardEvent = new KeyboardEvent('keydown', {
                    keyCode: 13, code: 'KeyEnter', key: 'Enter'
                })
                let initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? 'initKeyboardEvent' : 'initKeyEvent'
                keyboardEvent[initMethod]('keypress', true, true, window, "Enter", 0, false, false, false, false)
                document.getElementById('search').dispatchEvent(keyboardEvent) 
1
2
3
4
5
6

c)

				var inpEle = document.querySelector('#search')
                var event = document.createEvent('Event') 

                //注意这块触发的是keydown事件，在awx的ui源码中bind监控的是keypress事件，所以这块要改成keypress
                event.initEvent('keypress', true, false)
                event = Object.assign(event, {     // 模拟回车
                    ctrlKey: false,
                    metaKey: false,
                    altKey: false,
                    which: 13,
                    keyCode: 13,
                    key: 'Enter',
                    code: 'Enter'
                })
                inpEle.focus()
                inpEle.dispatchEvent(event)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

d)

            function fireKeyEvent(el, evtType, keyCode) {
                var evtObj
                if (document.createEvent) {
                    evtObj = document.createEvent('UIEvents')
                    evtObj.initUIEvent(evtType, true, true, window, 1)

                    delete evtObj.keyCode;
                    if (typeof evtObj.keyCode === "undefined") {//为了模拟keycode
                        Object.defineProperty(evtObj, "keyCode", { value: keyCode })
                    } else {
                        evtObj.key = String.fromCharCode(keyCode)
                    }

                    if (typeof evtObj.ctrlKey === 'undefined') {//为了模拟ctrl键
                        Object.defineProperty(evtObj, "ctrlKey", { value: true })
                    } else {
                        evtObj.ctrlKey = true
                    }
                    console.log('evtObj:', evtObj)
                    el.dispatchEvent(evtObj)
                }
            }

			fireKeyEvent(document.getElementById('search'), "keypress", 13) // 调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

e)

            function fireKeyEvent2(el, evtType, keyCode) {
                var doc = el.ownerDocument
                var win = doc.defaultView || doc.parentWindow, evtObj
                console.log('doc:', doc)
                console.log('win:', win)

                if (doc.createEvent) {
                    if (win.KeyEvent) {
                        evtObj = doc.createEvent('KeyEvents')
                        evtObj.initKeyEvent(evtType, true, true, win, false, false, false, false, keyCode, 0)
                    } else {
                        evtObj = doc.createEvent('UIEvents')
                        Object.defineProperty(evtObj, 'keyCode', {
                            get: function () { return this.keyCodeVal }
                        })
                        Object.defineProperty(evtObj, 'which', {
                            get: function () { return this.keyCodeVal }
                        })

                        evtObj.initUIEvent(evtType, true, true, win, 1)
                        evtObj.keyCodeVal = keyCode

                        let key = evtObj.keyCode
                        let which = evtObj.which
                        let t = "keyCode " + key + " 和 (" + which + ") "
                        if (evtObj.keyCode !== keyCode) {
                            console.log(t + "不匹配")
                        } else {
                            console.log(t + "匹配")
                        }
                    }
                    el.dispatchEvent(evtObj)

                } else if (doc.createEventObject) {                    
                    evtObj = doc.createEventObject()
                    evtObj.keyCode = keyCode;
                    el.fireEvent('on' + evtType, evtObj)
                }
            }
            
			fireKeyEvent2(document.getElementById('search'), "keypress", 13) // 调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41