@EncyKe
2016-10-26T02:50:13.000000Z
字数 1997
阅读 2227
#手记
在一次移动电商页面的开发中,在处理一枚用户留言的 textarea
时,遇到这样的需求——
textarea
,默认一行显示;textarea
区域;应该说,这样的需求并不多见,而且之前笔者对于 textarea
的接触是比较少的,不过还是作了一些分析——
textarea
是无法根据用户输入的内容自动伸缩高度的,所以要获取内容高度,需要通过 JS 来控制; textarea
的 height
等于其 scrollHeight
;height
预设为 auto
;textarea
为单行 rows="1"
,设定其最大高度为单行行高的 3 倍(其实更重要的是 maxlength="45"
);而在开发过程中,遇到的另一个比较大的问题是,如何行之有效地监听用户的输入?
最开始笔者用的是对整个 textarea
监听用户的 onkeyup
事件,然而实际效果虽基本符合需求,但性能很不好,在换行后会经历一次无法忽视的闪动后才会下拉,回退也比较迟钝。后来经过多方寻求,发现 H5 对 input
和 textarea
提供了 oninput
事件,可以监听文本框内容更改,在使用之后,发现效果正好符合预期,而且移动版对于新特性的兼容性(IE 9 及其以下不支持)并不需要太过担心。以下还是提供一枚 hack 参考,以及 JS 和 jQuery 两版的源码。
var ie = !!window.ActiveXObject;
if (ie) {
object.onpropertychange = fn;
} else {
object.addEventListener("input", fn, false);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Input event of textarea</title>
<style type="text/css">
textarea {
/* === 关键代码 === */
resize: none;
white-space: normal;
word-break: break-all;
overflow-y: hidden;
max-height: 63px; /* $line-height * lines-number */
line-height: 21px; /* $line-height */
/* === 可自定义代码 === */
padding: 0 4px;
font-size: 14px;
border: 1px black solid;
border-radius: 4px;
outline: none;
}
</style>
</head>
<body>
<textarea maxlength="45" rows="1" placeholder="最多请勿超过 45 字"></textarea>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
<script type="text/javascript">
/* === JS 版 === */
var textarea = document.getElementsByTagName('textarea')[0];
textarea.addEventListener('input', function heightAdjust() {
// 删除时上缩;
this.style.height = 'auto';
// 换行时下拉;
this.style.height = this.scrollHeight + 'px';
});
/* === jQuery 版 ===
$('textarea').on('input', function heightAdjust() {
// 删除时上缩;
$(this).css('height', 'auto');
// 换行时下拉;
$(this).css('height', $(this).prop('scrollHeight') + 'px');
});
*/
</script>
</body>
</html>