vue 判断字符串是否是英文_Vuejs Element input组件区分中英文统计长度

偶尔用Vue写写CMS后台界面，记录一下遇到的不常见的问题。

需求

文本显示长度限制，中文、中文标点、全角字符按1长度，英文、英文符号、数字按0.5长度计算。即"hh哈哈h"在js中长为5，在这里的需求中长3.5。主要控制一下最终字符串的显示长度。

1.png

正则匹配长度

这个比较简单，可以搜到大把现成的正则表达式，这里比较好的是在Unicode表上面直接选对应区间:Unicode table

这里用正则匹配出中文字符长度，加上剩下的乘0.5。

let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/g;

let mat = text.match(cnReg);

if (mat) {

return mat.length + (text.length - mat.length) * 0.5;

}

return text.length * 0.5;

动态切长字符串

当输入框长度过长时要切掉后面的字符串，跟原生maxlength交互相似，要确定从后面切多少位还是要用到循环，不如从后面一位一位切，直到长度够小。

while (this.fixedStrLength(val) > len) {

val = val.substr(0, val.length - 1);

}

input组件最大长度判断

项目用的Element-UI组件库，el-input用maxlength控制最大长度，这里不好控制maxlength。

最开始想法是@change动态修改值，发现只有失去焦点的时候内容才会更新，搜索得知确实如此，改用@input。

这时model绑定的值确实更新了，但是输入框里面的值并没有变化，很奇怪。

2.png

这时搜到这篇文章分析vuejs的input组件源码，发现@input里面应该包含一个$event对象，打印一下看看是什么，发现跟上图一毛一样，不科学啊只有一个字符串值？不用el-input改原生input标签。

3.png

果然是个对象，值在$event.target.value中，那element做了什么？找了下源码，把值传成一个const不可变变量，并用this.$emit('input', value);

把原来的$event覆盖掉了，所以拿不到对象，直接对值修改也不生效。

最后选择换成vue的input标签，加上class="el-input__inner" 看起来跟el-input一样，在@input中拿到$event就可以肆意妄为了@input="title=fixedOnInputChange($event.target.value, 20);$event.target.value=title"

End

最后再记录下vue里面的全局方法，再main.js中写下面的方法或者导入包含的js文件就可以了，在vue文件中可以直接 this.xxx()调用。

Vue.prototype.xxx = function() {

}

vue 判断字符串是否是英文_Vuejs Element input组件区分中英文统计长度相关推荐

vue 判断字符串是否是英文_vue rules以及原生js判断字符串是否为正整数(正小数)...
1.在vue中使用rules形式进行校验 1.首先在vue文件的methods()中添加校验方法,这里校验方法命名为isNumber用自带的.test方法进行正则校验 methods: { isNu ...
vue 判断字符串是否是英文_JS判断字符串长度的5个方法（区分中文和英文）
目的:计算字符串长度(英文占1个字符,中文汉字占2个字符) 方法一: 代码如下: String.prototype.gblen = function() { var len = 0; for (var ...
python判断是否是英文字母_用python如何判断字符串是纯英文
用python如何判断字符串是纯英文发布时间:2020-11-11 09:31:24 来源:亿速云阅读:97 作者:小新这篇文章主要介绍用python如何判断字符串是纯英文,文中介绍的非常详细, ...
vue 统计中英文字符串长度_Ant Design Vue 添加区分中英文的长度校验功能
原本的maxLength属性是不区分全角/半角字符的,对于一些可中英文混合输入地方而言不太合适.所以想找一个可区分全角/半角字符的校验,而且要保证一定的可重用性. 百度搜了一圈都没找到合适的现成的解决 ...
ant vue 设置中文_Ant Design Vue 添加区分中英文的长度校验功能
原本的maxLength属性是不区分全角/半角字符的,对于一些可中英文混合输入地方而言不太合适.所以想找一个可区分全角/半角字符的校验,而且要保证一定的可重用性. 百度搜了一圈都没找到合适的现成的解决 ...
PHP判断字符串是纯英文、纯汉字或汉英混合
PHP判断字符串是否为中文(或英文)的方法,除了正则表达式判断和拆分字符判断字符的值是否小于128 外还有一种比较特别的方法. 使用php中的mb_strlen和strlen函数判断方法比较简单:分 ...
判断字符串是否是英文
1.判断字符串中是否全为英文 boolean result = str.matches("[a-zA-Z]+"); //true:全文英文 str.matches(&qu ...
element input组件常用属性用法
在vue项目中肯定会用到element组件库,里面的input组件的用法和常用属性如下: ** 1,type属性:用法跟原生输入框一样,例:type="text",type=&qu ...
php判断字符串里有英文,PHP针对中英文混合字符串长度判断及截取方法示例
本文实例讲述了PHP针对中英文混合字符串长度判断及截取方法.分享给大家供大家参考,具体如下: /** * * 中英混合字符串长度判断 * @param unknown_type $str * @par ...
java 判断字符串是否为英文
//判断表示是否全为英文 private boolean strIsEnglish(String word) { boolean sign = true; // 初始化标志为为'true' for ( ...

vue 判断字符串是否是英文_Vuejs Element input组件区分中英文统计长度

vue 判断字符串是否是英文_Vuejs Element input组件区分中英文统计长度相关推荐

最新文章

热门文章

vue 判断字符串是否是英文_Vuejs Element input组件区分中英文 统计长度

vue 判断字符串是否是英文_Vuejs Element input组件区分中英文 统计长度相关推荐

最新文章

热门文章

vue 判断字符串是否是英文_Vuejs Element input组件区分中英文统计长度

vue 判断字符串是否是英文_Vuejs Element input组件区分中英文统计长度相关推荐