textarea输入框随高度随内容撑开

最新推荐文章于 2024-05-04 21:49:44 发布

原创最新推荐文章于 2024-05-04 21:49:44 发布 · 735 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #css #html

收录于

本文介绍两种使用jQuery实现自动调整Textarea高度的方法，确保Textarea高度能够随输入内容自动扩展，避免滚动条出现，提升用户体验。

	方法一（jquery）：
	
	$('textarea').each(function () {
	  this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
	}).on('input', function () {
	  this.style.height = 'auto';
	  this.style.height = (this.scrollHeight) + 'px';
	});
	
	方法二：
	
	function setHeight(element) {
	  $(element).css({'height':'auto','overflow-y':'hidden'}).height(element.scrollHeight);
	}
	$('textarea').each(function () {
	  setHeight(this);
	}).on('input', function () {
	  setHeight(this);
	});