• 限制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();
            }
        }  

      

  • 相关阅读:
    fatal error C1902: 程序数据库管理器不匹配;请检查安装 (zz)
    c++ std string reserve 测试
    2018年长沙理工大学第十三届程序设计竞赛
    2018年东北农业大学春季校赛
    从本质看海明码——海明码的由来
    CodeForces475
    一维背包问题
    2018年长沙理工大学第十三届程序设计竞赛 箱庭的股市
    高精度加法模板
    for,while,do while
  • 原文地址:https://www.cnblogs.com/yy95/p/10009475.html
Copyright © 2020-2023  润新知