实时显示剩余可以输入的文字数-freejs.net代码演示

首页>>Jquery文字>>实时显示剩余可以输入的文字数(2014-10-14)

实时显示剩余可以输入的文字数

XML/HTML Code

<script>
$(document).ready(function(){
var totalChars = 100; //Total characters allowed in textarea
var countTextBox = $('#counttextarea') // Textarea input box
var charsCountEl = $('#countchars'); // Remaining chars count will be displayed here
charsCountEl.text(totalChars); //initial value of countchars element
countTextBox.keyup(function() { //user releases a key on the keyboard
var thisthisChars = this.value.replace(/{.*}/g, '').length; //get chars count in textarea
var per = thisChars*100;
var value= (per / totalChars); // total percent complete
if(thisChars > totalChars) //if we have more chars than it should be
{
var CharsToDel = (thisChars-totalChars); // total extra chars to delete
thisthis.value = this.value.substring(0,this.value.length-CharsToDel); //remove excess chars from textarea
}else{
charsCountEl.text( totalChars - thisChars ); //count remaining chars
$('#percent').text(value +'%');
}
});
});
</script>

XML/HTML Code

<div class="row">
<div class="col-md-8"><div><textarea name="counttextarea" id="counttextarea" cols="45" rows="5" style="width: 400px;padding: 10px; margin:10px;"></textarea></div>
<div><span name="countchars" id="countchars">100</span> Characters Remaining. <span name="percent" id="percent"></span></div>
</div>