Limit Textarea

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

<!-- 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 423 Downloads 149

'JQuery', 'Limit', 'textarea', 'allow', 'len', 'length', 'characters', 'jquery', 'html', 'css', 'bootstrap', 'propertychange'

ANmarAmdeen
324
UI JS+JQuery
Revisions

v1.0

Needs