select2开启tags后输入中文样式错乱

最新推荐文章于 2025-08-23 14:22:16 发布

原创最新推荐文章于 2025-08-23 14:22:16 发布 · 600 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

前端开发同时被 2 个专栏收录

70 篇文章

订阅专栏

javascript

43 篇文章

订阅专栏

本文介绍了在使用Select2插件时遇到的中文输入显示样式错乱问题，作者发现是由于tags配置导致的宽度处理不足。通过调整输入框宽度计算方法，解决了输入中文时的显示不全问题。

前几天项目中使用了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";
        }

重新处理下输入中文时输入框的宽度，就可以了。