-
使用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)
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')
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
-
仅模拟回车事件
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)
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)
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)
d)文章来源：https://www.toymoban.com/news/detail-515229.html
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) // 调用
e)文章来源地址https://www.toymoban.com/news/detail-515229.html
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) // 调用
到了这里，关于js 模拟回车 模拟键盘，给input框输入值 触发回车事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
