Wednesday, February 22, 2012

TextArea remaining characters showing

---------------------------------------------------------
                                   TYPE : 1
---------------------------------------------------------

<script type="text/javascript" language="javascript">

 function textCounter(field, countfield, maxlimit) {
            if (field.value.length > maxlimit) {
                field.value = field.value.substring(0, maxlimit);
                alert('Textarea value can only be 20 characters in length.');
                return false;
            }
            else {
                countfield.value = maxlimit - field.value.length;
            }
        }
</script>




<textarea rows="10" cols="80" id="txtNotes" style="resize: none" onkeypress="textCounter(this,this.form.counter,20);"></textarea>
<input type="text" name="counter" maxlength="5" size="3" value="20" onblur="textCounter(this.form.counter,this,20);" />
                            chars remaining


-----------------------------------------------------------------------
                                           TYPE : 2
-----------------------------------------------------------------------

function countDown(control, maxLen, counter, typeName) {
    
var len = control.value.length;
    
var txt = control.value;
    
var span = document.getElementById(counter);
     span.style.display = '';
     span.innerHTML = (maxLen - len) + ' characters remaining';
    
if (len >= (maxLen - 10)) {
          span.style.color = 'red';
         
if (len > maxLen) {
               control.innerHTML = txt.substring(0, maxLen);
               span.innerHTML = (maxLen - control.value.length) + ' characters remaining';
               alert(typeName + ' text exceeds the maximum allowed!');
          }
     } 
else {
          span.style.color = '';
     }
}





<textarea id="Description" onkeyup="countDown(this, 255, 'desc', 'Description');"></textarea>


<SPAN id="desc" style="DISPLAY: none">255 characters remaining</SPAN>




-----------------------------------------------------------------
                                 TYPE : 3
-----------------------------------------------------------------

<script type="text/javascript" language="javascript">
        var len = 0;
        var characterLimit = 3492;

        $(document).ready(function () {


            //check for max length of a textarea START
            $("#divremainingChar").hide();
            $("#txtNotes").keydown(function (event) {
                len = $("#txtNotes").val().length;
                len += 1;

                var charactersRemaining = characterLimit - len;

                if (len >= characterLimit) {
                    // Allow only backspace and delete
                    if (event.keyCode == 46 || event.keyCode == 8) {

                    }
                    else {
                        event.preventDefault();
                    }
                }
                $("#divremainingChar").show();
                $('#remainingCharacters').html(charactersRemaining);
            });
            //check for max length of a textarea END

</script>



 <textarea cols="100" rows="10" id="txtNotes"></textarea>
                        <br />
                       <div style="color:Gray" id="divremainingChar"> <span id="remainingCharacters" ></span> characters remaining.  </div>

No comments:

Post a Comment