仿微信文本框,自动换行,动态高度,最大四行后滚动
原理:
js监听textarea实时变化值,将textarea内容插入到一个和textarea相同大小的div中,且各属性相同,高度除外;之后将根据div的高度来给textarea的高度赋值,超出四行的高度时不再给textarea赋值;当监听到textarea内容只有4个回车符号时,截断内容;注意当textarea最后字符为回车时特殊处理高度。
1.html
<div class="hiddenContent"></div>
<textarea type="text" id="MsgContent" name="textareaname" maxlength="300" rows="1" cols="1" placeholder="请在此留言……"></textarea>
2.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
textarea,.hiddenContent {
font-family: "microsoft yahei";
font-size: 30px;
color: #333333;
line-height: 40px;
padding: 10px;
width: 100%;
resize: none;
word-break: break-all;
border-radius: 6px;
}
textarea {
max-height: 182px;
min-height: 62px;
outline: none;
}
.hiddenContent {
position: fixed;
bottom: 0;
left: 0;
height: auto;
z-index: 9999;
border: 1px solid #EEEEEE;
}
3.js
function patch(re, s) {
re = eval("/" + re + "/ig")
return s.indexOf(re.source) > -1 ? s.match(re).length : 0;
}
$('#MsgContent').on("input propertychange", function() {
var content = $(this).val();
var data = content.replace(/\n/g, "<br>");
var num = patch('<br>', data);
if (content.length >= 3 && num >= 3 && content.length == num) {
$(this).val(content.substring(0, 3))
$(this).height((num + 1) * 40)
} else {
$(".hiddenContent").html(data)
if ($(this)[0].scrollHeight <= 200) {
setTimeout(function() {
var lastStr = content.substring(content.length - 1, content.length).replace(/\n/g, "<br>")
if (patch('<br>', lastStr)) {
$('#MsgContent').height($(".hiddenContent").height() + 40)
} else {
$('#MsgContent').height($(".hiddenContent").height())
}
}, 10)
}
}
})