基于vue的textarea文本框自动高度示例

最新推荐文章于 2023-04-12 14:59:16 发布

扶我起来，我还要写一行代码

最新推荐文章于 2023-04-12 14:59:16 发布

阅读量1.1k

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/tstmeng/article/details/104253464

版权

vue.js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

有时候我们需要textarea文本框能够随着内容的输入自动收缩，如果根据textarea的scrollHeight属性计算高度，文本框可以自动撑开，但是文本删除时不能自动收缩回去；因此整个思路是：做一个紧邻textarea文本框的pre标签，原模原样的显示文本框内容，再将pre标签的高度赋值给文本框即可，下面基于vue编写的一个单页面示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>文本框自动高度</title>
		<script src="js/vue.js"></script>

		<style type="text/css">
			.text-wrap {
				position: relative;
			}

			.text-wrap .pre,
			.text-wrap .textarea {
				margin: 0;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 0;
				display: block;
				border: 1px solid #000000;
				width: 200px;
				padding: 0;
				font-size: 14px;
				line-height: 20px;
				width: 100%;

				font-family: '宋体';
				white-space: pre-wrap;
				/* css-3 */
				white-space: -moz-pre-wrap;
				/* Mozilla, since 1999 */
				white-space: -pre-wrap;
				/* Opera 4-6 */
				white-space: -o-pre-wrap;
				/* Opera 7 */
				word-wrap: break-word;
				/* Internet Explorer 5.5+ */
				word-break: break-all;
				overflow: hidden;
			}

			.text-wrap .textarea {
				z-index: 1;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div id='app'>
			<table>
				<tr>
					<td>
						<div class="text-wrap">
						<pre class="pre">{{val1}}</pre>
							<textarea class="textarea" v-model="val1"></textarea>
						</div>
					</td>
					<td>
						<div class="text-wrap">
							<pre class="pre">{{val2}}</pre>
							<textarea class="textarea" v-model="val2"></textarea>
						</div>
					</td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: function() {
					return {
						val1: '',//文本框1的值
						val2: ''//文本框2的值
					}
				},
				watch: {
					val1: function(value) {
						this.setTextareaHeight(value);
					},
					val2: function(value) {
						this.setTextareaHeight(value);
					}
				},
				methods:{
				    //设置值等于value的文本框高度，定义该方法是为了适应多个文本框情况，减少变量申请，降低页面复杂度
					setTextareaHeight:function(value){
						let _self = this;
						setTimeout(function() {
							let textareas = document.getElementsByTagName('textarea');
							//遍历页面的所有文本框
							for (var i = 0; i < textareas.length; i++) {
								let obj = textareas[i];
								//捕获到值等于value的文本框对象，该对象为当前输入值的文本框
								if (obj.value === value) {
									obj.style.height = obj.previousElementSibling.clientHeight+'px';
								}
							}
						}, 10);
					}
				}
			})
		</script>
	</body>
</html>