前几天项目中使用了select2插件,有一个地方开启了tags配置项。今天突然发现这个空间站在输入中文的时候,显示样式错乱了。
于是我找到了select2的官网,看看是这个插件本身就有这个缺陷,还是我代码的问题。
这是直接在官网上的demo中输入的示例,截图的只是把汉字给截断了,由于不是录屏,效果没有出现来,再来看一个吧:
我输入了那么多文字,预期是能够正常展示的,但是现在只留下了一个残躯不全的文字以及半个符号。
原来是select2开启了tags后,针对输入查询关键字,仅仅做了英文的长度的处理,没有做关于输入的关键字是汉字场景的处理,那么输入框的宽度不够了,就产生了晃动、折行的问题了。
那么怎么解决呢?直接贴下解决方式吧
if (this.$search.attr('placeholder') === '') {
// 下面的方式在输入中文时有问题
// var minimumWidth = this.$search.val().length + 1;
// width = (minimumWidth * 0.75) + 'em';
// 修复开启tags后输入中文显示不全的问题
var str = this.$search.val();
var width1 = str.replace(/[^\u4e00-\u9fa5]/gi, "").length * 2;
var width2 = str.replace(/[\u4e00-\u9fa5]/gi, "").length * .75;
width = (width1 + width2 + 1) + "em";
}
重新处理下输入中文时输入框的宽度,就可以了。