JSFiddle - React, Tailwind, and code Playground

by Lijo

HTML

<html>
 <body>
      <form>
<div class="valueDiv">
                        <textarea name="ctl00$detailContentPlaceholder$txtApplicationUrl" rows="2" cols="20" id="detailContentPlaceholder_txtApplicationUrl" class="multiline" style="width:250px;">
</textarea>
                        <span id="detailContentPlaceholder_valApplicationURL" style="visibility:hidden;">*</span>
                    </div>

   
    
        </form>
    
         <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>
   
    </body>
        
     
</html>

JavaScript

$(document).ready(function () {
 
 
    var maxLength = 2;
 
    $('.multiline').keydown(function (e) {
 
 
        var existingText = $(this).val();
        var existingLength = existingText.length;
 
        if (existingLength >= maxLength) 
        {
            if (maxLength > 0) 
            {
 
                if (!checkSpecialKeys(e)) 
                {
                    $(this).val(existingText.substring(0, maxLength));
                     $(this).css('color','red');
                    
                    //Newly entered character not rendered since false is returned
                    e.preventDefault();
                }
            }
        }
 
    });
 
 
    //To trim the text if a paste happens
    $('.multiline').keyup(function (e) {
 
        var newText = $(this).val();
        var newLength = newText.length;
 
        if (newLength > maxLength) {
            if (maxLength > 0) {
                $(this).val(newText.substring(0, maxLength));
                $(this).css('color','red');
            }
        }
 
    });
 
 
}
);
 
 
function checkSpecialKeys(e) 
{
    if (e.keyCode >= 48 && e.keyCode <= 90) 
    {
        return false;
    }
 
    if (e.keyCode >= 96 && e.keyCode <= 111) 
    {
        return false;
    }
 
    else 
    {
        return true;
    }
}