最近在切一张聊天页面的时候需要实现一个类似于像微信一样的聊天输入框,即输入框的高度会随着内容的增加不断增高。
综合了一下网上的思路目前有依靠keyup来判断的,但是这种方法在遇到一次性输入大量文本的时候好像有点问题,而且在遇到删除文字时好像也有点问题。还有一种是依靠定时器来解决。当用户的焦点在输入框的时候隔一段时间就检查输入框里文本的实际高度,一旦实际高度大于输入框的高度,即把输入框的高度调成与文本的实际高度一致。我的代码就是采用了第二种。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天框</title>
<script type="text/javascript" src="JS/jquery-3.4.1.min.js"></script>
<style>
.div {
position: fixed;
width: 200px;
height: auto;
min-height: 60px;
border: solid black 1px;
background-color: #FFF;
bottom: 100px;
left: -40px;
margin-left: 50%;
}
.div-textarea {
position: absolute;
width: 80%;
height: auto;
top: 10px;
left: 10px;
bottom: 10px;
overflow-x: hidden;
overflow-y: hidden;
-webkit-user-select: text;
word-wrap: break-word;
word-break: break-all;
}
</style>
</head>
<body>
<div class="div"><textarea class="div-textarea"></textarea></div>
<script>
$(function () {
/*不断的保持高度相同*/
function keepHeight() {
var newHeight = $('.div-textarea')[0].scrollHeight;
$('.div').height(newHeight);
}
/*定时器*/
var liaotoan = setInterval(keepHeight, 1);
/*鼠标焦点时开启定时器*/
$('.div-textarea').on('click', function () {
liaotoan = setInterval(keepHeight, 1);
});
/*关闭定时器*/
$('.div-textarea').on('blur', function () {
clearInterval(liaotoan);
});
});
</script>
</body>
</html>