jquery 实现input宽度自适应

最新推荐文章于 2022-09-22 17:13:17 发布

原创最新推荐文章于 2022-09-22 17:13:17 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#input #jquery #function

本文介绍了一个使用jQuery实现的动态调整输入框大小的方法。通过监听键盘输入事件，根据输入内容的长度来实时改变输入框的宽度，确保用户可以清晰地看到全部输入内容。

$(document).ready(function () {
	$('input').live('keyup',function(){ //监视每个input
		var current=$(this).val().replace(/[^\u0000-\u00ff]/g,"aa").length;//获取input当前value长度，将每个汉字算成两个普通字符的长度
		var size=$(this).attr("size");//获取input当前size
		size+=(current-size);//计算新的size
		(size>20)? (size=size) :(size=20);//当size<=20时候保持不变
		$(this).attr("size",size);//重置size
	});
});

当然得先导入jquery.js啦！