Show how many characters remaining in a HTML text box using JavaScript

Question

This is my code   function textCounter field  countfield  maxlimit        if  field value length  gt  maxlimit            field value   field value substring 0  160           field blur            field focus            return false        else           countfield value   maxlimit - field value length            How can I display how many characters are remaining from a certain text box with a limit of 160

User · Accepted Answer

Dynamic HTML element functionThe code in here with a little bit of modification and simplification:

<input disabled  maxlength="3" size="3" value="10" id="counter">
<textarea onkeyup="textCounter(this,'counter',10);" id="message">
</textarea>
<script>
function textCounter(field,field2,maxlimit)
{
 var countfield = document.getElementById(field2);
 if ( field.value.length > maxlimit ) {
  field.value = field.value.substring( 0, maxlimit );
  return false;
 } else {
  countfield.value = maxlimit - field.value.length;
 }
}
</script>

Hope this helps!

tip:

When merging the codes with your page, make sure the HTML elements(textarea, input) are loaded first before the scripts (Javascript functions)

User · Answer

How about this approach  which splits the problem into two parts    Using jQuery  it shows a decrementing counter below the textarea  which turns red when it hits zero but still allows the user to type  I use a separate string length validator  server and client-side  to actually prevent submission of the form if the number of chatacters in the textarea is greater than 160    My textarea has an id of Message  and the span in which I display the number of remaining characters has an id of counter  The css class of error gets applied when the number of remaining characters hits zero   var charactersAllowed   160     document  ready function              Message   keyup function              var left   charactersAllowed -   this  val   length          if  left  lt  0                    counter   addClass  error                left   0                    else                   counter   removeClass  error                          counter   text  Characters left      left

User · Answer

I needed something like that and the solution I gave with the help of jquery is this    lt textarea class  textlimited  data-textcounterid  counter1  maxlength  30  gt text lt  textarea gt   lt span class  textcounter  id  counter1  gt  lt  span gt    With this script      the selector below will catch the keyup events of elements decorated with class textlimited and have a maxlength     textlimited maxlength    keyup function           get the fields limit     var maxLength     this  attr  maxlength            check if the limit is passed     if this value length  gt  maxLength           return false                find the counter element by the id specified in the source input element     var counterElement       textcounter       this  data  textcounterid            update counter  s text     counterElement html  maxLength - this value length      chars left            live demo Here

User · Answer

Just register an Eventhandler on keydown events and check the length of the input field on that function and write it into a separate element   See the demo   var maxchar   160  var i   document getElementById  textinput    var c   document getElementById  count    c innerHTML   maxchar   i addEventListener  keydown  count    function count e       var len    i value length      if  len  gt   maxchar          e preventDefault          else         c innerHTML   maxchar - len-1                 You should check the length on your server too  because Javascript might be disabled or the user wants to do something nasty on purpose

User · Answer

try this code in here   this is done using javascript onKeyUp   function      lt script gt  function toCount entrance exit text characters      var entranceObj document getElementById entrance     var exitObj document getElementById exit     var length characters - entranceObj value length    if length  lt   0      length 0    text   lt span class  disable  gt    text    lt   span gt      entranceObj value entranceObj value substr 0 characters         exitObj innerHTML   text replace   CHAR   length        lt  script gt    textarea counter demo

User · Answer

Included below is a simple working JS HTML implementation which updates the remaining characters properly when the input has been deleted    Bootstrap and JQuery are required for the layout and functionality to match   Tested on JQuery 2 1 1 as per the included code snippet     Make sure you include the JS code such that it is loaded after the HTML  Message me if you have any questions   Le Code    x000D   x000D    document  ready function     x000D    var len   0  x000D    var maxchar   200  x000D   x000D         my-input    keyup function    x000D      len   this value length x000D      if len  gt  maxchar   x000D          return false  x000D        x000D      else if  len  gt  0    x000D               remainingC    html   Remaining characters       maxchar - len      x000D        x000D      else   x000D               remainingC    html   Remaining characters       maxchar      x000D        x000D       x000D      x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  integrity  sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt div class  row  gt  x000D     lt div class  col-sm-6 form-group  gt  x000D       lt label gt Textarea lt  label gt  x000D       lt textarea placeholder  Enter the textarea input here    limited to 200 characters   rows  3  class  form-control  name  my-name  id  my-input  maxlength  200  gt  lt  textarea gt  lt span id  remainingC  gt  lt  span gt  x000D     lt  div gt  x000D   lt  div gt   lt  --row-- gt  x000D   x000D   x000D

User · Answer

You can bind key press event with your input box and returning false if characters are more than 160 will solve the problem jsfiddle   JavaScript      textarea   keypress function         if this value length  gt  160           return false                 remainingC   html  Remaining characters        160 - this value length           HTML   lt textarea gt  lt  textarea gt    lt span id  remainingC  gt  lt  span gt

User · Answer

HTML     lt form gt     lt textarea id  text  maxlength  10  gt  lt  textarea gt     lt div id  msg  gt 10 characters left lt  div gt     lt div id  lastChar  gt  lt  div gt   lt  form gt    JS   function charCount       var textEntered   document getElementById  text   value    var msg   document getElementById  msg      var counter    10- textEntered length      msg textContent   counter   characters left      var el   document getElementById  text    el addEventListener  keyup  charCount false

User · Answer

Try this   HTML    lt textarea id  textarea  rows  8  cols  50  maxlength  100   gt  lt  textarea gt   lt div id  feedback  gt  lt  div gt    JS    document  ready function             var max   1000              feedback   html max    characters remaining                 textarea   keyup function                 var text length       textarea   val   length              var text remaining   max - text length                   feedback   html text remaining     characters remaining

User · Answer

Try the following code for instance   working code in jsfiddle net  For textArea  use this    lt textarea id  txtBox  gt  lt  textarea gt            For textBox  use this    lt input type  text  id  txtBox   gt   lt br gt   lt input type  text  id  counterBox   gt   lt script gt   var txtBoxRef   document querySelector   txtBox     var counterRef   document querySelector   counterBox     txtBoxRef addEventListener  keydown  function      var remLength   0    remLength   160 - parseInt txtBoxRef value length     if remLength  lt  0           txtBoxRef value   txtBoxRef value substring 0  160       return false         counterRef value   remLength     characters remaining         true    lt  script gt    Hope this Helps

[javascript] Show how many characters remaining in a HTML text box using JavaScript

Examples related to javascript

Examples related to textarea