Special jQuery Character Count

Question

I really hope that you can help me. I have a simple jQuery character count script, that counts down when a user enters a character into a text field. However now I need to customize it in two ways:

1.) I need to add a checkbox. When this checkbox is checked the character count has to be recuded by a certain amount e.g. 10 characters.

2.) The character count currently only shows when I start entering the first character, however I want the character count to show when the page loads.

If you have any questions please let me know.

Below you can find my code:

function countChar(val) {
    var len = val.value.length;
    if (len >= 500)
        val.value = val.value.substring(0, 500);
    else 
        $('#charNum').text(500 - len);
};

<textarea id="field" onkeyup="countChar(this)"></textarea>
<div id="charNum"></div>

bhansa · Answer 1 · 2016-06-22T11:46:20.920

0

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    <script>

    //Sorry for making too many functions, well you also use other approches as well.

    var len;
    //for initiliase the count text value on page
      function init(){
    $("#charNum").text(500)
}

    //for keyup and checkbox
      function countChar() {
        len = $("#field").val().length;
        if (len >= 500) {
          val.value = val.value.substring(0, 500);
        }
        if($("#idk").is(":checked"))
        {
          $("#charNum").text(500-($("#field").val().length +10));
        }
         else {
          $('#charNum').text(500 - len);
        }
      }
    </script>
  </head>

  <body onload="init();">
    <textarea id="field" onkeyup="countChar()"></textarea>
    <input type="checkbox" name="chk" id="idk" onchange="countChar()" />
    <div id="charNum"></div>
  </body>

</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
  <script>
    //Sorry for making too many functions, well you also use other approches as well.

    var len;
     //for initiliase the count text value on page
    function init() {
      $("#charNum").text(500)
    }

     //for keyup  
    function countChar() {
      len = $("#field").val().length;
      if (len >= 500) {
        val.value = val.value.substring(0, 500);
      }
      if ($("#idk").is(":checked")) {
        $("#charNum").text(500 - ($("#field").val().length + 10));
      } else {
        $('#charNum').text(500 - len);
      }
    }
  </script>
</head>

<body onload="init();">
  <textarea id="field" onkeyup="countChar()"></textarea>
  <input type="checkbox" name="chk" id="idk" onchange="countChar()" />
  <div id="charNum"></div>
</body>

</html>

edited Jun 22 '16 at 11:46

answered Jun 22 '16 at 11:13

bhansa

7,282
3
30
55

Thank you so much! This already works great. The only thing that doesnt work with this script is, that when I uncheck the box the value of the character count doesnt change back. So when its checked it should reduce the character count by 10, but when I uncheck it, it should add back the 10 that it reduced when I checked it. I hope that is understandable ^^ – alex141097 Jun 22 '16 at 11:30
Oh and I just did some further testing. When I check the checkbox it reduces the character count by 10, however when I then continue typing the 10 is added back to the character count, even while the box is still checked. – alex141097 Jun 22 '16 at 11:33
Wow this already works great! There is only one thing that is not working as needed. When hitting the checkbox the value wont be decreased by 10, before the user enters another character. Is it possible to fix this? – alex141097 Jun 22 '16 at 16:17
sorry, didn't get you i think everything working fine. – bhansa Jun 22 '16 at 17:07
Please join the chat room : http://chat.stackoverflow.com/rooms/115335/temp – bhansa Jun 22 '16 at 17:11
I cant, i need a reputation of 20 and I am pretty new here :/ – alex141097 Jun 22 '16 at 19:19
My question is the following: When I check the checkbox, the value doesnt decrease instantly. The value decreases once I enter the next character in the textbox. However I'd need it to instantly decrease the value. Does that work? – alex141097 Jun 22 '16 at 19:20
yes, it is working please check the code snippet provided in the answer. – bhansa Jun 23 '16 at 08:35

Special jQuery Character Count

1 Answers1