当网页中同时存在多个编辑框，文本高度都超过了<textarea>的高度时，编辑框内容将变成可滑动的，多个编辑框都可以滑动，加上网页的滑动，将会带来网页交互上的焦点混乱，尤其是在手机等小屏幕显示网页时，这种混乱会更加明显。编辑框高度如果能随高度变化，将能改善这种交互。
要实现这种效果其实也很简单，即当内容变化时实时计算和改变<textarea>的高度即可。
当 input 事件发生时添加如下方法来改变当前<textarea>的高度
$('textarea').unbind('input');
$('textarea').bind('input', function () {
handleTextareaHeight(this);
});
function handleTextareaHeight(element) {
var textareaMinHeight = 108;
element.style.height = textareaMinHeight + 'px';
if (element.scrollHeight > textareaMinHeight) {
element.style.height = element.scrollHeight + 'px';
}
}
其中textareaMinHeight 限定的是<textarea>最小高度。其对比显示效果如下
示例1.png
从图中我们可以看到左下角还有输入的字数的实时显示，而这里一个汉字被当作一个字符而两个ascii码被当作一个字符，其计算方法是如下函数得出的长度再除以2再取整数。
function getByteLen(val) {
var len = 0;
for (var i = 0; i < val.length; i++) {
var a = val.charAt(i);
if (a.match(/[^\x00-\xff]/ig) != null) {
len += 2;
}
else {
len += 1;
}
}
return len;
}
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="//lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js"></script>
<!--<link href="./css/respond_media.css" rel="stylesheet"/>-->
<style>
.text-area {
padding: 8px 8px 8px 8px;
background-color: #eeeeee;
width: 100%;
color: #404040;
font-size: 15px;
resize: none;
height: 120px;
}
.text-editing {
background-color: white;
width: 100%;
position: relative;
margin-top: 5px;
margin-bottom: 5px;
}
.text-size-alert {
color: #9a9a9a;
font-size: 10px;
position: absolute;
line-height: 8px;
left: 9px;
bottom: 12px;
}
</style>
</head>
<body>
<div class = "text-editing" style="margin: 50px;max-width:400px">
<textarea class="text-area" placeholder="输入内容" rows="4"></textarea>
<div class="text-size-alert"></div>
</div>
<div class = "text-editing" style="margin: 50px;max-width:400px">
<textarea class="text-area" placeholder="输入内容" rows="4"></textarea>
<div class="text-size-alert"></div>
</div>
<script>
$(function(){
var maxEditNumber = 2048;
$('textarea').unbind('input');
$('textarea').bind('input', function () {
//this.clientHeight = this.scrollHeight;
handleTextareaHeight(this);
updateTextSizeShow(this);
});
$('textarea').unbind('focus');
$('textarea').bind('focus', function () {
handleTextareaHeight(this);
});
function handleTextareaHeight(element) {
var textareaMinHeight = 108;
element.style.height = textareaMinHeight + 'px';
if (element.scrollHeight > textareaMinHeight) {
element.style.height = element.scrollHeight + 'px';
}
}
function updateTextSizeShow(element) {
var string = $(element).val();
var len = maxEditNumber - Math.floor(getByteLen(string) / 2);
var alert = $(element).parents('.text-editing').find('.text-size-alert');
if (len >= 0) {
len = maxEditNumber - len;
alert.html(len + '/' + maxEditNumber);
}
else {
len = -len;
alert.html('<span>-' + len + '</span>');
}
}
function getByteLen(val) {
var len = 0;
for (var i = 0; i < val.length; i++) {
var a = val.charAt(i);
if (a.match(/[^\x00-\xff]/ig) != null) {
len += 2;
}
else {
len += 1;
}
}
return len;
}
});
</script>
</body>
</html>
下图是当字符数超过限制时的显示效果：
当字数超过限制时的显示效果.png
本文所用到的知识很简单，在不久前刚接触h5时上面的知识确实把自己难倒过，所以在此只为做一点记录和整理，见笑。由于最近看的东西太杂，很多知识学习都不够深入，难以成文，见谅。
