当前位置:网站首页>Use of form text box (II) input filtering (synthetic event)
Use of form text box (II) input filtering (synthetic event)
2022-07-05 20:33:00 【Red blue purple】
Use of form text boxes ( Two ) The input filter ( Composite event )
The input filter
Shielding character
scene : The input box needs to limit the characters that appear , For example, it can only be numbers .
The input box itself does not have this function , But we can pass JavaScript To achieve . We can input characters into the input box , Rely on keyboard events , So you can add keyboard events , Then, according to the information of the event object, it is judged that the operator does not meet the conditions , disqualification , Just through event.preventDefault
Block default events , Block input .
<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>
The keyboard event we added above is keypress
, because keyup
It is a keyboard lift event , At this time, it has been entered into the input box , It doesn't work ; and keydown
Recognize function keys , Therefore, the function keys must be allowed to pass , Otherwise, there is no way to delete the input . in addition ,keypress
Support case sensitivity .
Processing shear plates
We have realized that only numbers can be entered , But if we copy non numeric data from outside , Pasting into the text box will break through our input filter .
At this time, we need to strengthen our input filtering through the clipboard event (HTML5 Added a clipboard event )
copy
: Triggered when a copy operation occurscut
: Triggered when the cut operation occurspaste
: Triggered when the paste operation occurs
These three events are prefixed before
The version is triggered before the operation of , But not often , I don't know any specific use situations . Blocking events can only be blocked in the three events triggered when they occur .
How to get the data of the shear board ? Can pass event
On the object clipboardData
Object to get , To prevent unauthorized access to the clipboard , Can only be accessed during a clipboard event clipboardData
object .
clipboardData
There are 3 A way :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 The first parameter is the format , The second parameter is the copied content
e.clipboardData.setData('text/plain', ' Duplicate false data ')
// Mask out default events , Copy fake data
e.preventDefault()
})
ipt.addEventListener('paste', (e) => {
// Read the data of the shear board
const text = e.clipboardData.getData('text/plain')
// Do not paste if the conditions are not met
if (!/^\d/.test(text)) {
e.preventDefault()
}
})
It looks like , Even the pasted data can only be input into the input box if it is a number .
Dealing with Chinese 、 Japanese and other input methods
When we use input methods , It will still bypass our limit of only entering numbers .
Here is an interesting knowledge point Composite event
In Chinese, you need to press multiple keys at the same time to input a character . Synthetic events are used to detect and control this input , The input character is in the... Of the event object data
in .
compositionstart
: Indicates that input is about to begin , heredata
For the empty stringcompositionupdate
: Triggered when a new character is inserted , heredata
Characters entered forcompositionend
: Indicates that normal keyboard input is about to be restored , heredata
For the text to be entered into the input box
practice :
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')
})
So we can at the end of the composite event , namely compositionend
In the event handler of , Remove the input Chinese , It is not allowed to input Chinese characters .
const ipt = document.getElementsByTagName('input')[0]
ipt.addEventListener('compositionend', (e) => {
// Remove the last few digits
e.target.value = e.target.value.slice(0, -e.data.length)
})
Complete code
<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) => {
// Read the data of the shear board
const text = e.clipboardData.getData('text/plain')
// Do not paste if the conditions are not met
if (!/^\d/.test(text)) {
e.preventDefault()
}
})
ipt.addEventListener('compositionend', (e) => {
// Remove the last few digits
e.target.value = e.target.value.slice(0, -e.data.length)
})
</script>
</body>
边栏推荐
- When JS method passes long type ID value, precision loss will occur
- Leetcode brush question: binary tree 14 (sum of left leaves)
- Process file and directory names
- 【数字IC验证快速入门】2、通过一个SoC项目实例,了解SoC的架构,初探数字系统设计流程
- 【数字IC验证快速入门】7、验证岗位中必备的数字电路基础知识(含常见面试题)
- 如何形成规范的接口文档
- Applet project structure
- 常用的视图容器类组件
- Nprogress plug-in progress bar
- 基础篇——配置文件解析
猜你喜欢
Convolution free backbone network: Pyramid transformer to improve the accuracy of target detection / segmentation and other tasks (with source code)
- Oui. Net Distributed Transaction and Landing Solution
Leetcode skimming: binary tree 10 (number of nodes of a complete binary tree)
【数字IC验证快速入门】6、Questasim 快速上手使用(以全加器设计与验证为例)
【数字IC验证快速入门】3、数字IC设计全流程介绍
Leetcode brush question: binary tree 14 (sum of left leaves)
Unity编辑器扩展 UI控件篇
【数字IC验证快速入门】7、验证岗位中必备的数字电路基础知识(含常见面试题)
[quick start of Digital IC Verification] 9. Finite state machine (FSM) necessary for Verilog RTL design
CVPR 2022 | common 3D damage and data enhancement
随机推荐
Leetcode: binary tree 15 (find the value in the lower left corner of the tree)
CVPR 2022 | 常见3D损坏和数据增强
y57.第三章 Kubernetes从入门到精通 -- 业务镜像版本升级及回滚(三十)
Propping of resources
2.8、项目管理过程基础知识
Leetcode(347)——前 K 个高频元素
19 mongoose modularization
- Oui. Net Distributed Transaction and Landing Solution
Schema和Model
证券开户选择哪个证券比较好?网上开户安全么?
Classic implementation of the basic method of intelligent home of Internet of things
sort和投影
Leetcode (347) - top k high frequency elements
Leetcode skimming: binary tree 17 (construct binary tree from middle order and post order traversal sequence)
走入并行的世界
基金网上开户安全吗?去哪里开,可以拿到低佣金?
Y57. Chapter III kubernetes from entry to proficiency -- business image version upgrade and rollback (30)
Applet global configuration
点云文件的.dat文件读取保存
Process file and directory names