DOM Composition 事件
时间:2019-09-25
本文章向大家介绍DOM Composition 事件,主要包括DOM Composition 事件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
做实时的表单表单校验时,如果输入的是非拉丁语言,那你可能会遇到下面的问题:
如上图所示,文本框不允许输入 '
之类的特殊字符,当用户在敲击拼音、还未最终输入时就已经触发了校验,提示输入不合法,有点尴尬。通常我们都是监听 input
或者 change
事件来校验用户输入,也就是说在用户输入拼音的过程中就已经触发了相关事件,进而触发校验。
现实中遇到类似问题时,我们一般会认为是输入法处理不当,这种底层的问题不应该由前端来填坑,然后就放弃治疗了。
那到底有没有前端规避这一问题的方法呢?还真有:DOM 提供了 Composition 事件 API。不过,应该很少有人关注到这几个事件,或者是笔者太孤陋寡闻,不然不会最近才留意到。
根据规范,Composition 事件触发顺序如下:
- 输入开始时触发
compositionstart
- 选择字/词完成输入时触发
compositionend
- 输入过程中每次击键时触发
compositionupdate
,包括 start 事件以后立即触发,end 事件以前立即触发 - Composition 事件以后触发
input
事件
通过 Composition 事件,在 compositionend
里校验非直接输入,就能有效地避免不恰当的校验时机产生的用户体验问题。
<h2>切换至中文或者其他非拉丁语系输入法</h2> <p> <label for="title1">监听 Input 校验</label> <input type="text" id="title1"> </p> <p> <label for="title2">中文输入法时监听 Composition 事件校验</label> <input type="text" id="title2"> </p>
.error { border: 3px solid red; }
const title1 = document.getElementById('title1'); const rule = /^[1-9a-zA-Z\u4e00-\u9fa5]+$/; const errorClassname = 'error'; function validate(node) { const value = node.value; if (!rule.test(value)) { node.classList.add(errorClassname); } else { node.classList.remove(errorClassname); } console.log(`Input -> ${value}`); } title1.addEventListener('input', function(event) { validate(this); }); let compositio = false; title2.addEventListener('compositionstart', function() { compositio = true; }); // 非拉丁语言输入校验 title2.addEventListener('compositionend', function(event) { validate(this); }); // 普通输入校验 title2.addEventListener('input', function(event) { if (!compositio) { validate(this); } })
原文链接:https://csspod.com/dom-composition-event/
参考链接:
https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event
https://blog.evanyou.me/2014/01/03/composition-event/
原文地址:https://www.cnblogs.com/momo798/p/11583261.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- BFE.dev前端刷题88 - 在JavaScript中实现负索引
- Springboot 原理
- Qt音视频开发17-海康sdk解码
- pytest文档47-allure报告添加用例失败截图
- [060]监听应用的前后台切换
- 借用 potplayer 播放器,在本地播放 b 站视频也能看弹幕了
- 非Spring项目管理Quartz
- ArrayList并发写出现Null值
- 那些有趣的网站系列(四)
- 纯CSS实现吸附效果
- Hexo-Matery主题性能优化
- 精选MAC应用推荐,让你搬砖效率翻倍!
- 【JAVA基础&高级】“面向对象篇” 知识点汇总
- pycharm 入门基础配置
- CS学习笔记 | 16、用户枚举三个关键步骤