多行textarea输入内容,进行水平垂直居中
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>textarea多行内容的水平垂直居中</title>
</head>
<style>
.divBox {
width: 200px;
height: 200px;
margin-top: 20px;
margin-left: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #dedede;
}
.textareaBox {
border: none;
text-align: center;
width: 200px;
max-height: 200px;
overflow: auto;
word-break: break-all;
resize: none;
}
.textareaBox:focus {
outline: none;
}
</style>
<body>
<div class="divBox">
<textarea class="textareaBox"></textarea>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
<script>
$(".textareaBox").on('input', function () {
this.style.height = 'auto';
this.style.height = this.scrollHeight + "px";
});
</script>
</body>
</html>
效果如图:
原文请见:https://www.cnblogs.com/keenjade/p/11463138.htmlhtm
如有漏洞,欢迎互动指教!!!!!!!!!!!!!