當網(wǎng)頁中同時存在多個編輯框，文本高度都超過了<textarea>的高度時，編輯框內(nèi)容將變成可滑動的，多個編輯框都可以滑動，加上網(wǎng)頁的滑動，將會帶來網(wǎng)頁交互上的焦點混亂，尤其是在手機等小屏幕顯示網(wǎng)頁時，這種混亂會更加明顯。編輯框高度如果能隨高度變化，將能改善這種交互。
要實現(xiàn)這種效果其實也很簡單，即當內(nèi)容變化時實時計算和改變<textarea>的高度即可。
當 input 事件發(fā)生時添加如下方法來改變當前<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
從圖中我們可以看到左下角還有輸入的字數(shù)的實時顯示，而這里一個漢字被當作一個字符而兩個ascii碼被當作一個字符，其計算方法是如下函數(shù)得出的長度再除以2再取整數(shù)。
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="http://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="輸入內(nèi)容" 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="輸入內(nèi)容" 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>
下圖是當字符數(shù)超過限制時的顯示效果：
當字數(shù)超過限制時的顯示效果.png
本文所用到的知識很簡單，在不久前剛接觸h5時上面的知識確實把自己難倒過，所以在此只為做一點記錄和整理，見笑。由于最近看的東西太雜，很多知識學習都不夠深入，難以成文，見諒。
