CODEWITHSUNDEEP
jquery
Sam
Sam

Reputation: 77

jQuery function to count characters in textarea is not working as expected

The below code is used to count characters in a textarea. The problem is, when I press "enter" (while focused on the textarea) the remaining characters are displayed but the textarea limit is over. Can someone help me with this?

$(document).ready(function() {
  var text_max = 99;
  $('#textarea_feedback').html(text_max + ' characters remaining');

  $('#textarea').keyup(function() {
    var text_length = $('#textarea').val().length;
    var text_remaining = text_max - text_length;

    $('#textarea_feedback').html(text_remaining + ' characters remaining');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<p id="textarea_feedback"></p>

Upvotes: 3

Views: 1752

Answers (4)

Ramyz
Ramyz

Reputation: 422

Try This

this function count up to limit and it will not allow to enter another characters extra

it just remove the extra characters.

function countChar(val) {
  var len = val.value.length;
  var text_max = 99;

  if (len >= text_max) {
    val.value = val.value.substring(0, text_max);
    $('#textarea_feedback').text(((text_max - len) + 1) + ' characters remaining - out of limit');
  } else {
    $('#textarea_feedback').text((text_max - len) + ' characters remaining');
  }
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea cols="50" rows="8" id="field" onkeyup="countChar(this)"></textarea>
<div id="textarea_feedback">99 characters remaining</div>

Upvotes: 1

Mitul Patel
Mitul Patel

Reputation: 154

Please Try This Solution, i think it is help you

jQuery(document).ready(function($) {
  var max = 99;
  $('#textarea_feedback').html(max + ' characters remaining');
  $('textarea.max').keypress(function(e) {
    var text_remaining = max - this.value.length;
    $('#textarea_feedback').html(text_remaining + ' characters remaining');
    $("p").html("");
    if (e.which < 0x20) {
      // e.which < 0x20, then it's not a printable character
      // e.which === 0 - Not a character
      return; // Do nothing
    }
    if (this.value.length == max) {
      $("p").html("out Of Limit");
      e.preventDefault();
    } else if (this.value.length > max) {
      // Maximum exceeded     
      this.value.substring(0, max);   
    }
  });
}); //end if ready(fn)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<span id="textarea_feedback"></span>
<textarea class="max"></textarea>
<p> </p>

Upvotes: 0

SadikAli
SadikAli

Reputation: 654

This may be help u

function checkTextAreaMaxLength(textBox, e, length) {
    mLen = length;
    var maxLength = parseInt(mLen);
    if (!checkSpecialKeys(e)) {
        if (textBox.value.length > maxLength - 1) {
            if (window.event)//IE
                e.returnValue = false;
            else//Firefox
                e.preventDefault();
        }
    }
}

function MinCharactorTextarea(textBox, e, MaxLength) {
    var tval = $(textBox).val();
    var tlength = tval.length;
    var lblMax = $(textBox).next();
    var text = tlength + " / " + MaxLength + " max";
    $(lblMax).text(text);
}

in ASP textbox

<asp:TextBox runat="server" ID="txtTitle" TextMode="MultiLine"   MaxLength="80" onkeydown="checkTextAreaMaxLength(this,event,'80');" onkeyup="MinCharactorTextarea(this,event,80);">

0 / 80 max

Upvotes: 0

Murad Hasan
Murad Hasan

Reputation: 9583

Here is the solution, try this fiddle,

Updated javascript

$(function(){
    var text_max = 99;
  $('#textarea_feedback').html(text_max + ' characters remaining');
  $("#textarea").keyup(function(){
      var text_length = $('#textarea').val().length;
      var text_remaining = text_max - text_length;
     $('#textarea_feedback').html(text_remaining + ' characters remaining');
  });
});

HTML

<span id="textarea_feedback"></span>
<textarea id="textarea"></textarea>

Upvotes: 0

Related Questions