web前端面试-------input与textarea的区别以及用div模拟textarea

最新推荐文章于 2024-10-05 20:55:49 发布

吃鱼吐泡泡

最新推荐文章于 2024-10-05 20:55:49 发布

阅读量9.8k

点赞数 2

分类专栏：前端 CSS HTML 文章标签： input与textarea区别 div模拟textarea

本文链接：https://blog.csdn.net/animatecat/article/details/82692345

版权

前端同时被 3 个专栏收录

71 篇文章 2 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

1.input与textarea的区别

<input>是单行文本框，不会换行。通过size属性指定显示字符的长度，注意：当使用css限定了宽高，那么size属性就不再起作用。

value属性指定初始值，Maxlength属性指定文本框可以输入的最长长度。可以通过width和height设置宽高，但是也不会

增加行数。

<textarea> 是多行文本输入框，文本区中可容纳无限数量的文本，无value属性，其中的文本的默认字体是等宽字体（通常是

Courier），可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

代码：

<div>
	input:<input value="啦啦啦啦啦" style="height:200px;width: 500px;">
</div>
<div style="margin-top: 20px;">
	textarea:</textarea><textarea  value="嘻嘻嘻" style="height:200px;width: 500px;"> 
   </textarea>
</div>

效果图：

可以看到：textarea中设置的value并没有显示，同时input文本依然只有一行，并且居中显示。

2.用div模拟textarea

作为多行文本域功能来讲，textarea满足了我们大部分的需求。然而，textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条，高度固执地岿然不动。

要解决这个问题很简单，一个普通的block元素上加个contenteditable="true"就ok了。

<div contenteditable="true"></div>

效果图:

代码：

		<style>
			.textarea{
				min-height: 100px;
				border: 1px solid #a0b3d6; 
				width: 300px;
				font-size: 14px;
				max-height: 300px;
				overflow-y: auto;
			}
		</style>
	</head>

	<body>
		<!--用div模拟textarea-->
		<div class="textarea" contenteditable="true">
			
		</div>
	</body>

给div设置了一个最小高度，当超过最小高度但不超过最大高度时，div的高度根据文本自适应，当超过最大高度时，出现滚动条。