限制input输入字符数（中文2个字符，英文1个字符）

最新推荐文章于 2024-07-29 12:30:54 发布

weixin_34129145

最新推荐文章于 2024-07-29 12:30:54 发布

阅读量5.4k

点赞数 2

文章标签： javascript java ui ViewUI

原文链接：http://www.cnblogs.com/yy95/p/10009475.html

版权

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

<input class="remark-modify" maxlength="32" type="text" v-model="name" @blur="saveRemark" @keypress.enter="saveRemark" @keyup="limitLength" autofocus>

限制长度的代码：

   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