2

So I am trying to make it when someone types in a "textarea" and while typing it displays the number of characters type so far. The code below is the field I am trying to have the counter for. I want the character counter by the work Troubleshooting. Any ideas how I can go about do it??

<tr>
                    <td width="70%">
                        <b>Troubleshooting</b><br />
                    </td>
                    <td width="30%">
                        <a href="javascript: validateHP()" onMouseover="buttonObject_HP.src='images/hp_1.png'" onMouseout ="buttonObject_HP.src='images/hp_0.png'">
                        &nbsp;<img name="buttonObject_HP" src="images/hp_0.png" border=0 alt="" width="75" height="20"/></a>        
                    </td>
                </tr>
            </table>
            <textarea class="normal" id="Reported" name="Reported" rows="12" cols="51" onchange="validateText();"></textarea>
Tacoma
  • 89
  • 1
  • 5
  • 15
  • 1
    Possible duplicate of [Count characters in textarea](https://stackoverflow.com/questions/5371089/count-characters-in-textarea) – Nisarg Shah Aug 16 '17 at 17:40
  • I tried this and its not what I am wanting. I am trying to have it show it live by Troubleshooting Like Troubleshooting (50 Characters). That one has a character limit. I don't want to limit it I want to display the amount your at. going up. – Tacoma Aug 21 '17 at 21:12

2 Answers2

1

I did the following to get what I wanted.

Placed the following in the head

<script src="http://code.jquery.com/jquery-1.5.js"></script>
     <script>
      function countChar(val) {
        var len = val.value.length;
        if (len >= 10000) {
          val.value = val.value.substring(50, 10000);
        } else {
          $('#charNum').text(2000 - len);
        }
      };
    </script>

Then placed the following div under my Troubleshooting

<div id="charNum">Characters Left</div>

Lastly I added the following to my textarea

onkeyup="countChar(this)"
Tacoma
  • 89
  • 1
  • 5
  • 15
0

You can use this in your code. It uses AngularJS.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
 
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>{{name.length}}</h1>

</div>

</body>
</html>
  • You can also use 'string.length' if you don't want to use AngularJS. It would have to be updated manually by a button. –  Aug 22 '17 at 18:52