解决 select2 开启 tags 输入中文显示不全的BUG
解决 select2 开启 tags 输入中文显示不全的BUG
- 一、急着修复,不求甚解:
- 二、分享Debug思路
- 三、如果你不想动源码,还有一个非完美修复:
- 相关BUG
一、急着修复,不求甚解:
- 直接打开
select2.full.min.js
内容复制到 https://tool.lu/js/ 点击【美化(Beutify)】按钮,格式化一下方便阅读。 - 格式化好后,搜索 “em” 会找到如下这段代码 :
.------------------------------------------------------------------------------------------------
.------------------------------------------------------------------------------------------------
em会有很多,搜完整匹配会更有效。
- 删除
else
中的代码,改成如下内容:
else {var str = this.$search.val();var b1 = str.replace(/[^\u4e00-\u9fa5]/gi, "").length * 2;var b2 = str.replace(/[\u4e00-\u9fa5]/gi, "").length * .75;a = (b1 + b2 + 1) + "em"
}
- 点击【净化(Purify)】压缩代码,然后保存即可修复。
- 当然如果你已经看懂了,其实在压缩版的
select2.full.min.js
中直接改也是一样的。
二、分享Debug思路
先看原因:
1、分析:汉字显示不全,英文数字正常。应该就是动态改变 input
宽度时中文的宽度没有正常获取。(估计人家根本就没处理中文的情况)
2、证实猜想,去源码中找到动态改变 input
宽度的位置。尝试搜索这个 input
相关的关键字,比如各个属性名。这里优先考虑 “width” 和 “em” 因为动态修改宽度,那属性名和单位出现的几率是最高的。(此时我们去未压缩的版本中找会顺手点)很幸运,火速找到了它。
3、原来作者直接写死了每个字符 0.75 个宽度,js里汉字又只占一个字符。看来完全不考虑我们的死活啊。
修复思路:通过正则分别取出汉字
和英文数字
分别计算: 汉字宽度 + 英文数字宽度 = input实际宽度。
信息:一个汉字2em
修else部分代码:
} else {//var minimumWidth = this.$search.val().length + 1;//width = (minimumWidth * 0.75) + 'em';var str = this.$search.val();var b1 =str.replace(/[^\u4e00-\u9fa5]/gi,"").length * 2; //统计汉字宽度var b2 = str.replace(/[\u4e00-\u9fa5]/gi,"").length * .75; //统计非汉字宽度width = (b1 + b2 + 1) + "em" //算出input宽度}
经过测试后确定修复。(如果你的项目发布时自动压缩js,那么就到此结束了。否则,继续手动处理一个压缩版)
4、项目中实际使用的肯定是min版。所以按【第一步】进行修改就行了。
三、如果你不想动源码,还有一个非完美修复:
https://select2.org/tagging
直接监听input
的keyup
事件动态修改input
宽度,但这个会有闪烁。(因为每次select2动态修改了一个错误的宽度,然后我们又在 keyup
事件回调中改成一个正确的宽度。所以就闪啊闪啊的。 )
$(document).on('keyup', '.select2-selection--multiple .select2-search__field', function(event){var $this = $(this);$this.css('width', '20em');// 写个大点的值就行了。不用计算。
});
相关BUG
解决 select2 部分浏览器开启 tags: true 后无法输入中文的BUG + 解决输入中文后无法回车结束的问题
解决 select2 开启 tags 输入中文显示不全的BUG相关推荐
- WebStrom、IDEA、PhpStrom等编辑器输入的中文显示不全且是繁体的解决办法
JetBrains更新后遇到的问题: 中文显示的是繁体,且显示不全 笔者更新了JetBrains后,里面所有的编辑器都变成了这样,下图仅展示了WebStrom,IDEA等都是一样的问题. 解决办法: ...
- 全面解决amule容易崩溃和中文显示、输入的问题(转)
全面解决amule容易崩溃和中文显示.输入的问题(转)[@more@] amule是一个类似windows下的emule的ed2k客户端.ed2k是一种类似于Bittorrent的点对点文件传输协议. ...
- 解决Ubuntu Pycharm无法输入中文
解决Ubuntu Pycharm无法输入中文 百度有很多解决 Pycharm无法使用中文输入法的问题,但我试了很多中方法,各种配置和重启都不能解决Ubuntu Pycharm无法使用中文输入法的问题. ...
- android底部弹出显示不全,Android 解决 NestedScrollView 底部内容被遮挡显示不全
Android 解决 NestedScrollView 底部内容被遮挡显示不全 很早之前就遇到过在使用 NestedScrollView 的时候发现底部的 View 总是显示不全, 看起来像是被底部的 ...
- 解决linux服务器上matplotlib中文显示乱码问题
解决linux服务器上matplotlib中文显示乱码问题 参考文章: (1)解决linux服务器上matplotlib中文显示乱码问题 (2)https://www.cnblogs.com/Bell ...
- 解决ScrollView嵌套RecyclerView出现item显示不全的问题
解决ScrollView嵌套RecyclerView出现item显示不全的问题 参考文章: (1)解决ScrollView嵌套RecyclerView出现item显示不全的问题 (2)https:// ...
- html iframe显示不全,滚动的iframe解决,但在iframe页面显示不全
我试图滚动iOS上的iframe,我成功了,它的滚动的好,参考:滚动的iframe解决,但在iframe页面显示不全 但是,所有的解决方案都有一个问题:iframe页面没有完全显示... 我测试了我的 ...
- Linux下解决qtcreator中不能输入中文的问题
在debian环境下用了两天Qt,今天突然发现在Qt 5的代码编辑器里面居然无法输入中文!生成的输入框也同样无法输入中文! 在其他软件里面把中文复制过去,调试也没发现有任何显示问题,搜索了一下,原来是 ...
- windows电脑上显示中文完好,新安装的办公系统上输入中文显示错误、无法显示中文
问题描述:在自己电脑是所有地方都能正常显示中文字体,却在新下载的公司OA办公软件中输入中文简体字无法准确显示,当输入一个字体时不能显示,输入多个字却显示其他不对应的字. 解决方法: 打开设置,找到下面 ...
最新文章
- Oracle删除表主键语句
- element ui input视图没刷新_[Selenium自动化测试实战] 如何在UI自动化测试中加入REST API的操作...
- ios 音高测试软件,App Store 上的“绝对音感训练!”
- 做生意做不过中国,于是英国发动了鸦片战争
- MangoDB的基本操作
- LuatOS-HMI概述
- Win10:更改桌面路径位置,彻底解放你的C盘
- ps海报合成教程_怎样合成创意环保海报图片的PS教程
- Java 中Calendar的使用
- 面向交付的IT软件管理流程
- 关于在vscode引入python中Crypto包的问题
- 学Python人工智能有发展前景吗?人工智能就业方向有哪些?
- 学人工智能需要什么学历?AI学历要求
- 个人入行做智能家居,应该从哪几方面入手?
- 通过nginx代理vue,vue再访问后端时出错记录
- WIN11 EDGE IE8调试
- 电子报纸教程--部署篇
- POJ2429 GCDLCM Inverse(整数分解,由GCD+LCM求a,b)
- 修改windows计算机名和描述
- 搞笑的好友印象代码_笨蛋┗━━┛人笨不能复生