html 输入框输入事件,input输入框事件「建议收藏」

html 输入框输入事件,input输入框事件「建议收藏」onfocus->键盘输入->onkeydown->onkeypress->onkeyup->oninput->失去焦点->onchange->onblur如下,奉上代码;functionhandleFocus(event){console.log(‘onfocus事件’,’value=’+event.targ…

大家好,又见面了,我是你们的朋友全栈君。

onfocus -> 键盘输入 -> onkeydown -> onkeypress -> onkeyup -> oninput -> 失去焦点 ->  onchange -> onblur

如下,奉上代码;

function handleFocus (event) {

console.log(‘onfocus事件’,’value=’+event.target.value,’keyCode=’+event.keyCode);

};

function handleKeyDown (event) {

console.log(‘onkeydown事件’,’value=’+event.target.value,’keyCode=’+event.keyCode);

}

function handleKeyPress (event) {

console.log(‘onkeypree事件’,’value=’+event.target.value,’keyCode=’+event.keyCode);

}

function handleKeyUp (event) {

console.log(‘onkeyup事件’,’value=’+event.target.value,’keyCode=’+event.keyCode);

}

function handleInput (event) {

console.log(‘oninput事件’,’value=’+event.target.value,’keyCode=’+event.keyCode);

}

function handleChange (event) {

console.log(‘onchange事件…’,’value=’+event.target.value,’keyCode=’+event.keyCode);

};

function handleBlur (event) {

console.log(‘onblue事件’,’value=’+event.target.value,’keyCode=’+event.keyCode)

}

执行结果:

4517117abd8e

其实这个过程并没有很意外,唯一感觉不太对劲的是 onchange 事件并不是每次输入框值改变的时候触发的,而是在失去焦点时候,并且在 onblur 之前触发;

2、说说这些事件

onfocus

并没有什么特别的,就是当焦点转移到(点击,tab切换) input 框上边的时候触发;

onkeydown

键盘按下的时候触发,但是此时按下的值并没有被输入到 input ,所以,此时的 value 没有值,或者说它的值 只能是之前的旧值

另外,此时可以阻止按键的默认事件;

onkeypress

按键在按下之后,并且是按键松开之前触发的;

和 keydown 一样不能获取新的到 value;此时,也可以阻止按键的默认事件;

但是这个事件对一下按键的支持不好,一些非输入性质的按键(如;delete, backspare)不支持;(除enter);

oninput

这个事件很贼,它的触发时机,从上面就可以看到,onpress 之后 onkeyup 之前;

此时,已经可以拿到 value,不能拿到keycode,不可以阻止默认事件了 ;

关键是这货明明是每次输入框的值变化时候出发的,抢了onchange 的饭碗;

另外,这东西是新的,IE9以下不支持,需要使用 onpropertychange;

还有这货,仅仅在input, textarea 支持;

onkeyup

按键在松开之后触发的;

能获取新的到 value,keycode;此时,不可以阻止按键的默认事件;

onchange

你敢说这是你认识的onchange吗?反正我是不敢;在失去焦点之后触发的,明明是 onchange 为什么是在失去焦点后触发的,还偏偏比 onblur 快;

能获取新的到 value,不能拿到 keycode;此时,不可以阻止按键的默认事件;

onblur

失去焦点时候触发,但是还是比 onchange 慢了;

能获取新的到 value,不能拿到 keycode;

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/140842.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 支持向量机通俗导论(理解SVM的三层境界)

    支持向量机通俗导论(理解SVM的三层境界)支持向量机通俗导论(理解SVM的三层境界)作者:July。致谢:pluskid、白石、JerryLead。说明:本文最初写于2012年6月,而后不断反反复复修改&优化,修改次数达上百次,最后修改于2016年11月。声明:本文于2012年便早已附上所有参考链接,并注明是篇“学习笔记”,且写明具体参考了pluskid等人的文章。文末2013年的PDF是为证。另…

  • RTSP协议解析_RTP协议

    RTSP协议解析_RTP协议RTSP被用于建立的控制媒体流的传输,它为多媒体服务扮演“网络远程控制”的角色。尽管有时可以把RTSP控制信息和媒体数据流交织在一起传送,但一般情况RTSP本身并不用于转送媒体流数据。媒体数据的传送可通过RTP/RTCP等协议来完成。一次基本的RTSP操作过程是:首先,客户端连接到流服务器并发送一个RTSP描述命令(DESCRIBE)。流服务器通过一个SDP描述来进行反馈,反馈信息包括流数

  • 基于opencv在摄像头ubuntu根据视频获取

    基于opencv在摄像头ubuntu根据视频获取

    2021年12月31日
  • MySQL——日期函数,时间函数

    MySQL——日期函数,时间函数

  • 制作opc服务器,力控服务器怎样做为OPC服务器,供其他OPC客户端程序访问

    制作opc服务器,力控服务器怎样做为OPC服务器,供其他OPC客户端程序访问publicvoidListAll(Guidcatid,outOpcServers[]serverslist){serverslist=null;Dispose();Guidguid=newGuid(13486D51-4821-11D2-A494-3CB306C10000);Typetypeoflist=Type.GetTypeFromCLSID(guid);OPCL…

  • istio解决了什么问题(istio k8s)

    问题简述通过istio实现灰度发布,浏览器访问报404错误,但是通过curl传递一个Host请求头就能访问成功。问题复现RancherUI界面启动Istio,并开启ingress网关命名空间启动Istio自动注入部署nginx应用###deploy-nginx-v1.yamlapiVersion:apps/v1kind:Deploymentmetadata:labels:app:nginxversion:v1name:nginx-v1n

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号