我有一個只能包含500個字符的多行文本框。現在,我想向用戶展示留下的字符數,因爲他們在文本框中鍵入的情況與我們使用Twitter時的情況相同。如何在asp.net中顯示多行文本框中留下的字符數?
請幫助
我有一個只能包含500個字符的多行文本框。現在,我想向用戶展示留下的字符數,因爲他們在文本框中鍵入的情況與我們使用Twitter時的情況相同。如何在asp.net中顯示多行文本框中留下的字符數?
請幫助
你將不得不寫一些js代碼。
這裏是簡單snipptet:
<html><form name="form1"><input type="text" name="textArea" size="400" onkeyup="document.form1.count_display.value=document.form1.textArea.value.length;"><br/><input type="text" name="count_display"></form></body></html>
你可以改變計算顯示左側的人物,或者已經輸入數量,因爲你需要
讓我們先創建一個多行TextBox。
<asp:TextBox ID="textTextBox" Text='<%# Bind("Text") %>' runat="server"
CssClass="text smsTextBox" TextMode="MultiLine" Height="100px"
MaxLength="500" >
</asp:TextBox>
<p>
<span id="remaining" class="remaining">500 characters remaining</span>
<span id="messages" class="messages">1 message(s)</span>
</p>
現在,將此項添加到JavaScript文件或將此項添加到Javascript到項目被呈示的頁面上。 每次文檔加載腳本運行
<script type="text/javascript">
$(document).ready(function() {
if (typeof $('.smsTextBox').val() !== "undefined") {
var $remaining = $('.remaining'),
$messages = $remaining.next();
var chars = $('.smsTextBox').val().length,
messages = Math.ceil(chars/500),
remaining = messages * 500 - (chars % (messages * 500) || messages * 500);
$remaining.text(remaining + ' characters remaining');
$messages.text(messages + ' message(s)');
}
});
$(document).ready(function() {
var $remaining = $('.remaining'),
$messages = $remaining.next();
$('.smsTextBox').keyup(function() {
var chars = this.value.length,
messages = Math.ceil(chars/500),
remaining = messages * 500 - (chars % (messages * 500) || messages * 500);
$remaining.text(remaining + ' characters remaining');
$messages.text(messages + ' message(s)');
});
});
</script>
編碼愉快:-D
感謝您的代碼,但文本框是asp.net控制不HTML控件。當然是 – HotTester 2010-04-06 12:29:33
。這只是樣品。你可以粘貼客戶端事件,它將工作相同 – Tamir 2010-04-06 13:33:28