表单文本框的使用(二) 输入过滤(合成事件)

简介: 表单文本框的使用(二) 输入过滤(合成事件)

输入过滤

屏蔽字符

情景:输入框需要限制出现的字符,比如只能是数字。

输入框本身是没有这个功能的,但是我们可以通过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支持区分大小写。

filter

处理剪切板

上面我们已经实现只能输入数字了,但是如果我们从外部复制了非数字的数据,粘贴到文本框里就会突破我们的输入过滤。

filter

这时候就需要通过剪切板事件来加强我们的输入过滤了(HTML5增加了剪切板事件)

  • copy:复制操作发生时触发
  • cut:剪切操作发生时触发
  • paste:粘贴操作发生时触发

这三个事件都有添加前缀before的操作发生前触发版本,但是不常用,也不知道有什么具体使用情境。阻止事件也只能在发生时触发的三个事件中阻止。

怎么获取剪切板的数据呢?
可以通过event对象上的clipboardData对象来获取,为防止未经授权访问剪切板,只能在剪切板事件期间访问clipboardData对象。

clipboardData对象上有3个方法:getDatesetDataclearData

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

这样子,就能实现即使是粘贴的数据也要是数字才能输入到输入框了。

filter

处理中文、日语等输入法

filter

当我们使用输入法时,还是会绕过了我们的只能输入数字的限制。

这里引入一个比较有意思的知识点合成事件

中文这种是需要同时按下多个键才能输入一个字符的。合成事件就是用来检测和控制这种输入,输入的字符在事件对象的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')

})

filter

所以说我们可以在合成事件结束的时候,即compositionend的事件处理函数中,把输入的中文给去掉,就能够不允许把汉字输进去。

const ipt = document.getElementsByTagName('input')[0]

ipt.addEventListener('compositionend', (e) => {
    // 去掉后几位
    e.target.value = e.target.value.slice(0, -e.data.length)
})

filter

完整代码

<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>
目录
相关文章
|
6月前
|
Web App开发 小程序 Android开发
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
89 0
|
5月前
|
JavaScript 开发工具 git
大事件项目28文章分类—添加分类--表单准备和对话框关闭重置表单
大事件项目28文章分类—添加分类--表单准备和对话框关闭重置表单
大事件项目43----富文本结合表单的检验触发
大事件项目43----富文本结合表单的检验触发
|
5月前
|
JSON 开发工具 数据格式
大世界项目29----文章分类——添加分类-表单准备和对话框关闭重置表单
大世界项目29----文章分类——添加分类-表单准备和对话框关闭重置表单
|
6月前
根据用户是否输入和是否文本框内容为空来决定显示按钮颜色
根据用户是否输入和是否文本框内容为空来决定显示按钮颜色
38 0
|
6月前
|
JavaScript 前端开发 API
表单输入绑定
表单输入绑定
|
6月前
|
iOS开发
表单输入绑定 基本用法
表单输入绑定 基本用法
|
6月前
在表单提交后设置文字信息,及时播报表单的提交情况
表单作为草料二维码的高级功能之一,可用于收集格式统一的数据。你可以通过组合姓名、图片、检查项等组件搭建出电子表单,关联到二维码中,扫码填写表单即可更快速、规范的收集数据。在表单设置-提交成功页设置中可以设置表单提交成功后的页面详情和后续操作,支持设置填表人提交后显示文字信息、获取二维码凭证、配置后续操作按钮、跳转到活码。下面是表单提交后显示文字信息的使用技巧。
layui表单select框同时支持下拉和输入的解决方案
layui表单select框同时支持下拉和输入的解决方案
345 0
|
12月前
|
JSON JavaScript 数据库
vue搜索表格功能,根据input输入框和下拉框传递的参数进行搜索
vue搜索表格功能,根据input输入框和下拉框传递的参数进行搜索
115 1