vue的textarea根据文本长度自适应高度伸缩代码-html代码-BFW代码库

vue的textarea根据文本长度自适应高度伸缩代码

代码语言：html

所属分类：其他

代码描述：vue的textarea根据文本长度自适应高度伸缩代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>文本框自动高度</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.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="te.........完整代码请登录后点击上方下载按钮下载查看