当前位置:网站首页>表单文本框的使用(二) 输入过滤(合成事件)
表单文本框的使用(二) 输入过滤(合成事件)
2022-07-05 20:31:00 【赤蓝紫】
表单文本框的使用(二) 输入过滤(合成事件)
输入过滤
屏蔽字符
情景:输入框需要限制出现的字符,比如只能是数字。
输入框本身是没有这个功能的,但是我们可以通过JavaScript来实现。 我们能实现向输入框中输入字符,依靠的是键盘事件,所以可以通过添加键盘事件,然后根据事件对象的信息来判断符不符合条件,不符合条件,就通过event.preventDefault
阻止默认事件,即阻止输入。
<body>
<div class="input-box">
<input type="text" size="10" maxlength="10">
</div>
<script>
const ipt = document.getElementsByTagName('input')[0]
ipt.addEventListener('keypress', (e) => {
console.log(e.key)
if (!/^\d/.test(e.key)) {
e.preventDefault()
}
})
</script>
</body>
上面我们添加的键盘事件是keypress
,因为keyup
是键盘抬起事件,这个时候已经输入到输入框里了,没有作用;而keydown
会识别功能键,所以使用时还得考虑让功能键通过,不然就没法删除输入的内容了。另外,keypress
支持区分大小写。
处理剪切板
上面我们已经实现只能输入数字了,但是如果我们从外部复制了非数字的数据,粘贴到文本框里就会突破我们的输入过滤。
这时候就需要通过剪切板事件来加强我们的输入过滤了(HTML5增加了剪切板事件)
copy
:复制操作发生时触发cut
:剪切操作发生时触发paste
:粘贴操作发生时触发
这三个事件都有添加前缀before
的操作发生前触发版本,但是不常用,也不知道有什么具体使用情境。阻止事件也只能在发生时触发的三个事件中阻止。
怎么获取剪切板的数据呢? 可以通过event
对象上的clipboardData
对象来获取,为防止未经授权访问剪切板,只能在剪切板事件期间访问clipboardData
对象。
clipboardData
对象上有3个方法:getDate
、setData
、clearData
。
const ipt = document.getElementsByTagName('input')[0]
ipt.addEventListener('keypress', (e) => {
console.log(e.key)
if (!/^\d/.test(e.key)) {
e.preventDefault()
}
})
ipt.addEventListener('copy', (e) => {
// e.clipboardData.setData第一个参数是格式,第二个参数是复制的内容
e.clipboardData.setData('text/plain', '复制了假数据')
// 屏蔽掉默认事件,实现复制假数据
e.preventDefault()
})
ipt.addEventListener('paste', (e) => {
// 读取剪切板的数据
const text = e.clipboardData.getData('text/plain')
// 不满足条件不让粘贴
if (!/^\d/.test(text)) {
e.preventDefault()
}
})
这样子,就能实现即使是粘贴的数据也要是数字才能输入到输入框了。
处理中文、日语等输入法
当我们使用输入法时,还是会绕过了我们的只能输入数字的限制。
这里引入一个比较有意思的知识点合成事件
中文这种是需要同时按下多个键才能输入一个字符的。合成事件就是用来检测和控制这种输入,输入的字符在事件对象的data
中。
compositionstart
:表示输入即将开始,此时data
为空串compositionupdate
:新字符插入时触发,此时data
为输入的字符compositionend
:表示即将恢复正常的键盘输入,此时data
为要输入到输入框的文本
实践:
const ipt = document.getElementsByTagName('input')[0]
ipt.addEventListener('compositionstart', (e) => {
console.log('%c%s', 'color: red;font-size: 16px;', 'conpositionstart')
console.log(e.data)
})
ipt.addEventListener('compositionupdate', (e) => {
console.log('%c%s', 'color: blue;font-size: 16px;', 'compositionupdate')
console.log(e.data)
})
ipt.addEventListener('compositionend', (e) => {
console.log('%c%s', 'color: purple;font-size: 16px;', 'compositionend')
})
所以说我们可以在合成事件结束的时候,即compositionend
的事件处理函数中,把输入的中文给去掉,就能够不允许把汉字输进去。
const ipt = document.getElementsByTagName('input')[0]
ipt.addEventListener('compositionend', (e) => {
// 去掉后几位
e.target.value = e.target.value.slice(0, -e.data.length)
})
完整代码
<body>
<div class="input-box">
<input type="text" size="10" maxlength="10">
</div>
<script>
const ipt = document.getElementsByTagName('input')[0]
ipt.addEventListener('keypress', (e) => {
console.log(e.key)
if (!/^\d/.test(e.key)) {
e.preventDefault()
}
})
ipt.addEventListener('paste', (e) => {
// 读取剪切板的数据
const text = e.clipboardData.getData('text/plain')
// 不满足条件不让粘贴
if (!/^\d/.test(text)) {
e.preventDefault()
}
})
ipt.addEventListener('compositionend', (e) => {
// 去掉后几位
e.target.value = e.target.value.slice(0, -e.data.length)
})
</script>
</body>
边栏推荐
- Scala基础【HelloWorld代码解析,变量和标识符】
- July 4, 2022 - July 10, 2022 (UE4 video tutorial MySQL)
- 基础篇——配置文件解析
- Classic implementation method of Hongmeng system controlling LED
- mongodb基操的练习
- Rainbow 5.7.1 supports docking with multiple public clouds and clusters for abnormal alarms
- Hong Kong stocks will welcome the "best ten yuan store". Can famous creative products break through through the IPO?
- Mysql频繁操作出现锁表问题
- Notes on key vocabulary in the English original of the biography of jobs (12) [chapter ten & eleven]
- 走入并行的世界
猜你喜欢
[quick start of Digital IC Verification] 3. Introduction to the whole process of Digital IC Design
解决php无法将string转换为json的办法
【愚公系列】2022年7月 Go教学课程 004-Go代码注释
【数字IC验证快速入门】2、通过一个SoC项目实例,了解SoC的架构,初探数字系统设计流程
[Yugong series] go teaching course in July 2022 004 go code Notes
Leetcode brush question: binary tree 14 (sum of left leaves)
National Eye Care Education Conference, 2022 the Fourth Beijing International Youth eye health industry exhibition
IC科普文:ECO的那些事儿
零道云新UI设计中
Ros2 topic [01]: installing ros2 on win10
随机推荐
ICTCLAS word Lucene 4.9 binding
DP: tree DP
Some problems encountered in cocos2d-x project summary
Bzoj 3747 poi2015 kinoman segment tree
[quick start of Digital IC Verification] 9. Finite state machine (FSM) necessary for Verilog RTL design
Informatics Orsay all in one 1339: [example 3-4] find the post order traversal | Valley p1827 [usaco3.4] American Heritage
港股将迎“最牛十元店“,名创优品能借IPO突围?
.Net分布式事務及落地解决方案
sort和投影
14、Transformer--VIT TNT BETR
物联网智能家居基本方法实现之经典
Mysql频繁操作出现锁表问题
Schema and model
PyTorch 1.12发布,正式支持苹果M1芯片GPU加速,修复众多Bug
Hong Kong stocks will welcome the "best ten yuan store". Can famous creative products break through through the IPO?
【数字IC验证快速入门】1、浅谈数字IC验证,了解专栏内容,明确学习目标
A way to calculate LNX
document方法
When JS method passes long type ID value, precision loss will occur
小程序页面导航