前端基础JS——input输入框的oninput事件和onchange事件

在开发过程中，input用的比较多的是change事件，忽略了还有input事件。

onchange——input输入过程中不会触发，失去焦点时才会触发；
兼容性：所有浏览器都支持，可以用于<input>, <select>, 和 <textarea>元素。

oninput——在用户输入时触发，它是在元素值发生变化时立即触发；实时触发
缺陷：从脚本中修改值不会触发事件。从浏览器下拉提示框里选取值时不会触发。IE9 以下不支持，所以IE9以下可用onpropertychange 事件代替。

<input type="text" oninput="getValue();" id="inputbtn"/>
<p id="inputcont"></p>

<script type="text/javascript">
function getValue(){var btn = document.getElementById("inputbtn");var box = document.getElementById("inputcont");box.innerHTML  = btn.value;
}
</script>

前端基础JS——input输入框的oninput事件和onchange事件相关推荐

【JavaScript】——input元素的oninput事件和onchange事件
1.oninput事件是在输入框中输入时就会触发,该事件在<input>或<textarea>元素的值发送改变时触发. 2.onchange事件是在输入框输入完内容后,输入框失 ...
input元素的oninput事件和onchange事件的使用和区别
1.input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加oninput属性,属性值为处理事件函数的调用 html代码: <input type="text" i ...
input元素的oninput事件和onchange事件
input元素的oninput事件和onchange事件框架用多了,感觉原生的有点弱化了,不说了,是时候巩固一波了 ^ _ ^ 1.input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加 ...
JS改变input的value值不触发onchange事件解决方案（转）
JS改变input的value值不触发onchange事件解决方案 (转) 参考文章: (1)JS改变input的value值不触发onchange事件解决方案 (转) (2)https://www. ...
有关input输入框内容改变后的触发事件
有关input输入框内容改变后的触发事件,也是今天遇到的问题.我使用时间插件为输入框填充内容,想实现输入框内容改变后执行相应的方法,发现使用change方法没有反应.百度了半天,最后才发现问题所在. ...
JS中onpropertychange事件和onchange事件区别
2019独角兽企业重金招聘Python工程师标准>>> 当一个HTML元素的属性用js改变的时候,都能通过 onpropertychange来捕获.例如一个 <input na ...
微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
js input输入框校验
只能输入英文 <input type="text" οnkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> ...
input 的 oninput onkeypress onkeydown onchange 事件的区别
事件执行顺序: <input type="text" id="foo" onkeydown="console.log('down')" ...

前端基础JS——input输入框的oninput事件和onchange事件

前端基础JS——input输入框的oninput事件和onchange事件相关推荐

最新文章

热门文章