博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
限制input输入字符数(中文2个字符,英文1个字符)
阅读量:7282 次
发布时间:2019-06-30

本文共 1653 字,大约阅读时间需要 5 分钟。

input的maxlength可以限制input的输入的字符数,但是是字符串的长度,相当于判断str.length;然而经常会有中文字符算2个字符英文算1个字符的需求,目前只能通过编写代码来实现。

  

限制长度的代码:

limitLength(e) {        const input = e.target;        const value = input.value        const split = value.split('');        const map = split.map((s, i) => {            return (value.charCodeAt(i) >= 0 && value.charCodeAt(i) <= 128) ? 1 : 2;        });        let n = 0;        const charLength = map.length > 0 && map.reduce((accumulator, currentValue, index) => {             const count = accumulator + currentValue;            if (count === 31 || count === 32) {                n = index;            }            if (count > 32) {                       this.name = split.slice(0, n+1).join('')                    // this.$emit("setUserName",split.slice(0, n+1).join(''));            }               return count        });        },

  

 

注:当同时要满足失去输入框焦点保存输入框数据,又要满足回车保存输入框数据时,回车之后,会先触发回车然后再触发失去焦点的事件。

      可以判断当前的触发事件的类型(比如enter可以通过判断事件对象中的key,blur可以通过判断事件对象中的type)来加条件,触发enter就不让触发失去焦点的方法去执行保存操作。

 

其他有问题的实现方法:

1、使用事件中的阻止默认事件实现达到最大输入值时阻止输入框的输入,需要注意在事件触发后的任何阶段调用preventDefault方法来取消该事件,意味着该事件的所有默认动作都不会发生.默认事件包括:复制、删除等操作都不能再执行。

remarkKeyup(e) {        const input = e.target;        //匹配汉字正则表达式        const regex = /[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29\u{20000}-\u{2A6D6}\u{2A700}-\u{2B734}\u{2B740}-\u{2B81D}\u{2B820}-\u{2CEA1}\u{2CEB0}-\u{2EBE0}]/ug;        const replace = input.value.replace(regex, 'aa');        const length = replace.split('').length;        if (length >= 32) {                e.preventDefault();        }    }  

  

转载于:https://www.cnblogs.com/yy95/p/10009475.html

你可能感兴趣的文章
关于 webpack 4.0.0 使用 html-webpack-plugin 报错的处理方法
查看>>
PHP-生成二维码(qr-code)
查看>>
git/github使用(入门到中阶)
查看>>
计数排序,桶排序与基数排序
查看>>
Android 项目目录结构
查看>>
一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](九)
查看>>
Facebook Docusaurus 中文文档 添加博客
查看>>
JavaScript温故(一)
查看>>
醒来或者吃饱又是一年
查看>>
Spark入门
查看>>
Angular 5 开发一个有道翻译
查看>>
charm_PHP,一个还有诸多问题的PHP MVC框架
查看>>
Python 类继承相关问题
查看>>
第五部分:Intellj IDEA插件介绍
查看>>
微服务关键概念脑图梳理
查看>>
PhantomJS,隐身浏览器
查看>>
【252天】我爱刷题系列(11)
查看>>
npm入手笔记0x002-发布自己的Node.js模块及其版本管理
查看>>
敏感词检测算法小结
查看>>
async/await with webpack+babel in Browser
查看>>