1. 程式人生 > >Form表單,textarea標籤輸入框 字數限制,和已輸入字數的統計顯示

Form表單,textarea標籤輸入框 字數限制,和已輸入字數的統計顯示

<script type="text/javascript">
$(document).ready(function() {
    <%-- 頁面進來時就呼叫 --%>
    setTitleLength();
  });

function setTitleLength() {
$this = $('#title');
var length = $this.val().length;
var lengthNum = 40;//設定限制的字數
//超過指定字數便擷取
if (length > lengthNum) {
var text = $this.val().substring(0, lengthNum);
$this.val(text);
$('#info_limit').text(lengthNum);
} else {
$('#info_limit').text(length);
}
}
</script>
<body>
<div class="control-group">
<label class="control-label">標題:</label>
<div class="controls">
    <%-- 新增事件呼叫 --%>
<form:textarea id="title" path="title" htmlEscape="false" rows="3" class="input-xxlarge required" onkeyup="setTitleLength();"/>
<span class="help-inline"><font color="red">*</font> </span>
</div>
<div class="controls">
<font color=#666666>限40個字 已輸入 <font color="#CC0000"><span id="info_limit">0</span></font> 個字</font>
</div>
</div>
</body>