JSFiddle - React, Tailwind, and code Playground

by Dilip Prajapati

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.2.2/typescript.min.js"></script>
<div>


  <input disabled maxlength="3" size="3" value="10" id="counter">
  <textarea onkeyup="textCounter(this,'counter',10);" id="message">
</textarea>

</div>
<br>
<input disabled maxlength="3" size="3" value="10" id="counter1">
<textarea onkeyup="textCounter(this,'counter1',10);" id="message">
</textarea>

<script>
  function textCounter(field, field2, maxlimit) {
    console.log(field);
    console.log(field2);
    console.log(maxlimit);
    //alert(field + field2  + maxlimit);
    var countfield = document.getElementById(field2);
    /* $(field2).html(text_remaining); */
    if (field.value.length > maxlimit) {
      field.value = field.value.substring(0, maxlimit);
      return false;
    } else {
      countfield.value = maxlimit - field.value.length;
    }
  }

</script>

JavaScript

/* function textCounter(field,field2,maxlimit)
{
alert('field + field2 + maxlimit');
 var countfield = document.getElementById(field2);
 if ( field.value.length > maxlimit ) {
  field.value = field.value.substring( 0, maxlimit );
  return false;
 } else {
  countfield.value = maxlimit - field.value.length;
 }
} */