标签输入插件 tagsinput 输入中文显示不全bug

最新推荐文章于 2023-07-10 01:46:13 发布

池鱼1024

最新推荐文章于 2023-07-10 01:46:13 发布

阅读量387

点赞数

分类专栏：前端插件文章标签： javascript

本文链接：https://blog.csdn.net/qq_39230593/article/details/111055343

版权

前端插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题

在使用 bootstrap-tagsinput 或者 jQuery-Tags-Input 输入中文时会出现中文显示不全的情况
bug复现

分析

当输入英文时 input 框能跟随内容自适应宽度
查看源码找到监听输入方法

$(data.fake_input).bind('keypress', data, function (event) {
	if (_checkDelimiter(event)) {
		event.preventDefault();
		if ((event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)))
			$(event.data.real_input).addTag($(event.data.fake_input).val(), { focus: true, unique: (settings.unique) });
		$(event.data.fake_input).resetAutosize(settings);
		return false;
	} else if (event.data.autosize) {
		$(event.data.fake_input).doAutosize(settings);
	}
});

输入汉字时无法触发keypress 事件导致无法动态修改 input的宽度

解决

将此方法分为两部分 keypress 事件只作为回车时生成新的标签
用 input 事件监听输入框输入

$(data.fake_input).bind('keypress',data,function(event) {
	if (_checkDelimiter(event)) {
		event.preventDefault();
		if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) )
			$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
		  $(event.data.fake_input).resetAutosize(settings);
		return false;
	}
});
$(data.fake_input).bind('input',data,function(event) {
	if (event.data.autosize) {
		$(event.data.fake_input).doAutosize(settings);
	}
})