1708452744

Javascript character count site


Probably the most interesting aspect of the <b style="color: green">textarea</b> tag that bears some discussion is the maxlength attribute. For many years, there was no obvious way to set the maximum amount of content that can be entered in the field. However, we could easily employ a keypress event to catch keystrokes that would make the maxlength attribute work in any browser. Given that defined limits on a large field may be difficult for end users to keep track of, many sites opt to inform users of the number of characters that may be typed. Using a similar keypress mechanism to the previous example, we might enable that as well: ![image](https://ytimg.googleusercontent.com/vi/72MOpztAWvA/maxresdefault.jpg) ```html <form> <label>textarea with maxlength = 10</lable> <textarea name="textAreaFld" id="textAreaFld" rows="10" cols="40" wrap="soft" maxlength="10" placeholder="Fill this out with lots of text"> </textarea> <div class="remaining"></div> </form> ``` ```js let els = document.querySelector("textarea"); for (let i=0, len=els.length; i < len; i++){ const max = els[i].getAttribute("maxlength"); if((max) && (max > - 1)) els[i].onkeypress = function (el) { document.querySelector("#remaining").innerHTML = "Characters Remaining: " + (this.getAttribute("maxlength") - this.value.length); return (this.value.length < this.getAttribute("maxlength")); } } ``` rewrite the code on your site and let your users know how many characters they are allowed to type. leave your comment if you liked the post

(0) Comments