• 限制input输入字符数(中文2个字符,英文1个字符)


    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-u4DB5u4E00-u9FEAuFA0EuFA0FuFA11uFA13uFA14uFA1FuFA21uFA23uFA24uFA27-uFA29u{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();
            }
        }  

      

  • 相关阅读:
    C#综合揭秘——细说多线程(上)
    Tinyxml2学习
    GNSS数据下载网站整理,包括gamit、bernese更新文件地址[2020.04更新]
    c#中xml增删查改
    C#比较两个对象中的指定字段值是否相等
    C#数据导出帮助类
    ajax文件下载
    C#中使用NPOI进行DataTable和Excel互转
    使用 ICSharpCode.SharpZipLib.Zip压缩解压文件
    C#DataTable转List<T>互转
  • 原文地址:https://www.cnblogs.com/yy95/p/10009475.html
Copyright © 2020-2023  润新知