说说 input 输入框的事件

简介: 从input框获取焦点到,输入值,失去焦点这个过程所有事件,以及一些特点;1、过程  onfocus -> 键盘输入 -> onkeydown -> onkeypress -> onkeyup -> oninput -> 失去焦点 ->  onchange -> onblur  如下,奉上代码...

从input框获取焦点到,输入值,失去焦点这个过程所有事件,以及一些特点;

1、过程

  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)
    }

 

  执行结果:

  

  其实这个过程并没有很意外,唯一感觉不太对劲的是 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;

 

目录
相关文章
|
SQL 弹性计算 关系型数据库
HTAP数据库 PostgreSQL 场景与性能测试之 3.1 - (OLAP) 大表JOIN统计查询-10亿 join 1亿 agg
标签 PostgreSQL , HTAP , OLTP , OLAP , 场景与性能测试 背景 PostgreSQL是一个历史悠久的数据库,历史可以追溯到1973年,最早由2014计算机图灵奖得主,关系数据库的鼻祖Michael_Stonebraker 操刀设计,PostgreSQL具备与Oracle类似的功能、性能、架构以及稳定性。 PostgreSQL社区的贡献者众多
2199 0
|
10月前
|
机器学习/深度学习 人工智能 自然语言处理
人工智能与未来医疗:AI技术在疾病诊断中的应用前景####
本文探讨了人工智能(AI)在现代医疗领域,尤其是疾病诊断方面的应用潜力和前景。随着技术的不断进步,AI正逐渐改变传统医疗模式,提高诊断的准确性和效率。通过分析当前的技术趋势、具体案例以及面临的挑战,本文旨在为读者提供一个全面的视角,理解AI如何塑造未来医疗的面貌。 ####
|
移动开发 小程序 UED
iBox系统系统开发iBox数字藏品电商平台开发之藏品交易部分源码
1.数字作品上传管理,2.数字作品发放规则3.作品共识版权唯一标识4.实名认证体系5.藏品品合成体系6.盲盒系统配置管理7.二级市场管理监督等系统功能8.藏品预约抢购机制等以下是iobx电商系统藏品交易的部分源码classPayextendsBaseApi{public$ibox_config;publicfunction__construct($params=[]){parent::__construct($params);$config=newConfigService();$this->shop_config=$confi
|
机器学习/深度学习 算法 数据挖掘
基于LSTM神经网络的电力负荷预测(Python代码实现)
基于LSTM神经网络的电力负荷预测(Python代码实现)
941 0
|
监控 Kubernetes 网络协议
上云业务的k8s容器排障与思考
本文主要讲述了在完成业务上云后,面临因业务请求量激增导致的系统复杂故障和挑战。作者通过排查分析,发现了一个长时间处于“进行中”状态的异常任务,客户端(APP2)进程卡死,而服务端(APP3)进程正常结束。进一步分析发现,问题出在kube-proxy代理的会话超时机制,由于请求处理延迟,kube-proxy清理了会话记录,导致服务端回包异常,客户端无法识别,从而形成进程假死。 最后,作者强调了在成本控制背景下,通过分析流量增长原因、优化技术架构和调整运营策略来改善系统性能和稳定性的必要性。
697 5
上云业务的k8s容器排障与思考
|
10月前
|
供应链 算法 安全
深度解析区块链技术的分布式共识机制
深度解析区块链技术的分布式共识机制
492 0
|
供应链 物联网 新制造
云上智能制造:重塑工业未来,驱动智能升级的新篇章
云上智能制造平台作为智能制造领域的重要创新成果,正以其独特的优势和广泛的应用场景引领着制造业的智能化升级。未来,随着技术的不断进步和应用的不断拓展,云上智能制造平台将在推动产业升级、提升生产效率、优化资源配置等方面发挥更加重要的作用。我们有理由相信,在云上智能制造平台的助力下,制造业将迎来更加辉煌的未来。
779 0
|
SQL 关系型数据库 MySQL
MySQL性能优化实战:从索引策略到查询优化
MySQL性能优化聚焦索引策略和查询优化。创建索引如`CREATE INDEX idx_user_id ON users(user_id)`可加速检索;复合索引考虑字段顺序,如`idx_name ON users(last_name, first_name)`。使用`EXPLAIN`分析查询效率,避免全表扫描和大量`OFFSET`。通过子查询优化分页,如LIMIT配合内部排序。定期审查和调整策略以提升响应速度和降低资源消耗。【6月更文挑战第22天】
1605 2
IBSS、BSS和ESS之间的区别
【8月更文挑战第23天】
1115 0
|
前端开发 Java 开发工具
springboot对接阿里云视频点播
在阿里云的视频点播官方文档中,可以看到是有一个上传SDK和一个服务端SDK的,上传视频可以用上传SDK里面的服务端SDK里面的java上传SDK,其他操作查询删除什么的只能用服务端SDK里面的javaSDK