大家好,又见面了,我是你们的朋友全栈君。
框架用多了,感觉原生的有点弱化了,不说了,是时候巩固一波了 ^ _ ^
第一种:直接在元素标签上添加oninput属性,属性值为处理事件函数的调用
<input type="text" id="input" oninput="handleInput()"></input>
function handleInput() {
// 处理事件代码
}
第二种:获取input元素,然后在元素对象上添加oninput属性,属性值为函数,函数内部为处理事件函数的调用
<input type="text" id="input"></input>
var inputEle = document.querySelector('#input')
inputEle.oninput = function() {
handleInput()
}
function handleInput() {
// 处理事件代码
}
第三种:获取input元素,然后在元素上利用事件监听添加input事件
<input type="text" id="input"></input>
var inputEle = document.querySelector('#input')
inputEle.addEventListener('input', handleInput)
function handleInput() {
// 处理事件代码
}
oninput事件是在输入框中输入时就会触发
onchange事件是在输入框输入完内容后,输入框失焦后触发
onchange事件兼容性好,主流浏览器都支持
oninput事件IE9以下不支持,其余主流浏览器都支持,针对IE9以下的可以使用onpropertychange事件来替代
[1] oninput 事件 [2] input输入框的input事件和change事件
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/135594.html原文链接:https://javaforall.cn