input 的 oninput onkeypress onkeydown onchange 事件的区别
事件执行顺序:
<input type="text" id="foo"
onkeydown="console.log('down')"
onkeypress="console.log('press')"
oninput="console.log('input')"
onkeyup="console.log('up')" >
以上打印顺序为 ' down press input up', 故对应的事件触发顺序为 onkeydown > onkeypress > oninput > onkeyup
oninput vs onchange:
oninput 是input内内容改变时触发, onchange则在内容改变并且input失焦后触发
https://www.w3schools.com/jsref/event_oninput.asp
onkeypress vs onkeydown:
onkeypress 事件触发不包括ctrl, backspace等功能键, 即 ctrl+c等按键不触发 onkeypress 但会触发 onkeydown, 因为onkeydown事件触发包括所有按键
oninput vs onkeypress/onkeydown:
oninput 是input内内容更新变化时触发, onkeypress则在按下按键后触发(此时 input 内文本还没更新):
<!-- 以字母大写效果触发为例可看出两者区别 -->
INPUT <input id="testInput" oninput="this.value=this.value.toUpperCase()" /> <br/>
KEYPRESS <input id="testKeyPress" onkeypress="this.value=this.value.toUpperCase()" />
以上测试代码线上地址: https://jsfiddle.net/skura23/atn1uepm/
input 的 oninput onkeypress onkeydown onchange 事件的区别的更多相关文章
- 为什么Jquery对input file控件的onchange事件只生效一次
今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...
- html input的file文件输入框onchange事件触发一次失效解决方法
最近在做一个图片上传的功能,出现提交一次后,file输入框的change事件无法再次触发的bug,就是说提交一次后必须刷新才能再次提交,这就坑了~ 于是想办法解决它~ 在网上找了一些资料,找到这几种方 ...
- Jquery对input file控件的onchange事件只生效一次的解决方案
1.原始方法:把事件写在file控件的onchange=""里面: 2.Jquery方法一: $('#fileId').live('change',function(){ //逻辑 ...
- 解决Jquery对input file控件的onchange事件只生效一次的问题
如题,解决办法的代码如下: 1. $('#fileId').live('change',function(){ //逻辑添加.... }); 2. $('#fileId').change(functi ...
- oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测
这几天项目着急,同时也学到好多以前没有接触过的知识.oninput.onchange与onpropertychange事件的区别, 与input输入框实时检测 onchange事件只在键盘或者鼠标操作 ...
- [TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍
1. onfocus事件 input框获取到焦点时,触发了该事件,比如获取到焦点时,修改input框的背景色.这个功能其实可以使用css的伪类:focus来定义. 2. onblur事件 这个与onf ...
- JS改变input的value值不触发onchange事件解决方案 (转)
方法(一)(转载的网络资料) 需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...
- input的onchange事件实际触发条件与解决方法
input中onchange事件已经属于元老级别了,并且现在同onclick一样使用频率很高,然而onchange的机制实际上有很多童鞋并不清楚,我们通过实例来分析这个事件的特征. 触发onchang ...
- js监听文本框值变化事件,就oninput & onpropertychange & onkeyup & onchange的区别
在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
随机推荐
- CTS 如何处理 gating clock 和 generated clock
1. CTS 时会将 ICG cell 作为 implicit nostop pin 处理,直接穿透,以 ICG cell 后面的 sink 点作为真正的 sink 来长 tree 2. CTS 时会 ...
- 关于ELK
官方文档:https://www.elastic.co/guide/en/elasticsearch/reference/6.0/getting-started.html 日志: https://ww ...
- C# 语法一 构造函数
1.构造函数的执行顺序 2.静态变量和成员变量的区别 代码示例: using System; using System.Collections.Generic; using System.Linq; ...
- linux调度器源码分析 - 新进程加入(三)
本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 引言 之前的文章已经介绍了调度器已经初始化完成,现在只需要加入一个周期定时器tick驱动它进行周期调度即可,而加 ...
- 如何屏蔽在Skyline的TerraExplorer中加载Shape或者KML等数据时的缓冲提示信息
在使用TerraExplorer软件或者二次开发自定义打开FLY工程时,以及在已有的FLY工程中导入其他矢量数据,如SHP.WFS图层.KML图层时,总会看到类似下图的提示信息: 有些用户问,如何能屏 ...
- ORA-14551: 无法在查询中执行 DML 操作
编写了一个oracle函数,函数体内实现一系列数据库的逻辑处理,涉及到数据的增删等操作,返回NCLOB类型. 然后通过查询方式调用函数: SELECT PKG.MY_FUN('A') FROM DUA ...
- eclipse 报错Version 1.6.0_45 of the JVM is not suitable for this product. Version:1.7 or greater is required
最近离职来了一家新公司,之前的公司的开发IDE用的是IntelliJIDEA和SpringSourceToolSuit,自己在家里用的也是MyEclipse,所以使用eclipse的经验还是不足.结果 ...
- 介绍一个axios调试好用的工具:axios-mock-adapter
上一篇文章中写到用promise时应注意的问题,这一篇文章继续介绍一个可以和axios库配合的好工具: axios-mock-adapter.axios-mock-adapter可以用来拦截http请 ...
- React-理解Redux
Redux是什么? 是专于状态管理的库 专于状态管理和react解耦 单一状态,单项数据流 核心概念 store state action reducer Redux工作流 react 要改变stor ...
- 马加爵遗书 VS 药家鑫遗书
前言:今天是贰零壹柒年最后一个工作日,亦是2017年12月29日,因为明天就放元旦假了,公司同事比往常相对轻松些.中午吃完午饭,在办公室大家有说有笑,有人说姓马的人都挺牛X啊,比如:马云, ...