Limit Textarea

Show number of characters in a textarea and limit if it goes greater than allowed
Code below uses bootstrap classes

CodeFunctionName
What is this?

Public

Tested

Imported
<!-- HTML -- >
<div class="card-header" >
<i class=" <%=ParaIcon% > fa-fw" > </i > Parameters <div class="badge badge-secondary badge-pill" >200 chars </div >
<span id="count_para" > </span >
</div >
<div class="card-body p-0" >
<Textarea Name="CodeParams" wrap="virtual" id="ta_para" class="form-control w-100 " rows="5" placeholder="Parameters" > <%=ThisParas% > </Textarea >
</div >

<!-- JQuery part -- >
<!-- either within head tag or below at footer -- >
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js" > </script >
<script type="text/javascript" >
$('#ta_para').on('input propertychange', function() {
var max_len = 200; // Max allowed characters
var len = $(this).val().trim().length;
$(this).val($(this).val().substring(0, max_len)); // to limit it
$('#count_para').text(len > 0 ? len + ' character' + (len == 1 ? '' : 's') : '');
if(len > max_len)
$('#count_para').removeClass('text-success').addClass('text-danger');
else
$('#count_para').removeClass('text-danger').addClass('text-success');
});
</script >

Count and limits when adding new code in MyDev.net

Views 3,582

Downloads 1,429

CodeID
DB ID