1. $('textarea#txtPrizeNote'); //表示textarea控件名稱
2. 'span' 顯示剩余字數的標簽
HTML:
代碼如下:
<div>
<textarea id="txtPrizeNote" runat="server" height="74px" width="480px" maxlength="10"
style="width: 480px; height: 74px; float: left"></textarea>
<span style="color: Red;">*</span><br />
剩余字數：<span id="showmsg" style="color: red"></span>
</div>
代碼如下:
<script type="text/javascript">
//返回val的字節長度
function getByteLen(val) {
var len = 0;
for (var i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null) //全角
len += 2;
else
len += 1;
}
return len;
}
//返回val在規定字節長度max內的值
function getByteVal(val, max) {
var returnValue = '';
var byteValLen = 0;
for (var i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null)
byteValLen += 2;
else
byteValLen += 1;
if (byteValLen > max)
break;
returnValue += val[i];
}
return returnValue;
}
$(function() {
var _area = $('textarea#txtPrizeNote');
var _info = _area.next();
var _max = _area.attr('maxlength');
var _val;
_area.bind('keyup change', function() { //綁定keyup和change事件
if (_info.find('span').size() < 1) {//避免每次彈起都會插入一條提示信息
_info.append(_max);
}
_val = $(this).val();
_cur = getByteLen(_val);
if (_cur == 0) {//當默認值長度為0時,可輸入數為默認maxlength值
_info.text(_max);
} else if (_cur < _max) {//當默認值小於限制數時,可輸入數為max-cur
_info.text(_max - _cur);
} else {//當默認值大於等於限制數時
_info.text(0);
$(this).val(getByteVal(_val,_max)); //截取指定字節長度內的值
}
});
});
</script>