The JavaScript Prompt Character Limit

Save

Many websites and online services use JavaScript code to deliver interactive features, including prompts that require users to input text and number characters into an online form, or password and username input fields. Some websites configure the JavaScript prompt’s text field with a maximum character limit.

About JavaScript Text Fields

  • The text field or text area appears below the question or instruction on the Web page or in the pop-up window. By default, the text field expands to accommodate characters as the website user types the information into the field. You can configure JavaScript actions for text fields in many ways, including auto-populating the text field, spell checking entered text and setting a maximum character limit.

Maximum Character Limits

  • Configuring the JavaScript code to set a maximum character limit helps webmasters to control user input; for example, setting a maximum character limit in a password prompt field can stop users from accidentally entering an incorrect password. Some online forms, such as job application forms, also want succinct answers to each question, so setting a maximum character limit can stop the applicant from writing too much. Adding the code for a countdown of the number of remaining characters can help the user.

JavaScript Character Limit Function Code

  • To add a JavaScript prompt with a character-limited text area, you’ll need to add the JavaScript function code snippet to the header section of the applicable Web page. Add the following JavaScript function code before the “</head>” tag:

    <script language="javascript" type="text/javascript">
    function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
    limitField.value = limitField.value.substring(0, limitNum);
    } else {
    limitCount.value = limitNum - limitField.value.length;
    }
    }
    </script>

JavaScript Text Area and Text Field Codes

  • After adding the JavaScript function code, you can add to the same Web page the code for a character-limited text area in an online form or a single-line text field.
    Use this code for a text area:

    <form name="exampleform">
    <textarea name="limitedtextarea" onKeyDown="limitText(this.form.limitedtextarea,this.form.countdown,90);"
    onKeyUp="limitText(this.form.limitedtextarea,this.form.countdown,90);">
    </textarea><br>
    <font size="1">(Maximum characters: 90)<br>
    You have <input readonly type="text" name="countdown" size="3" value="90"> characters left.</font>
    </form>

    Use this code for a single-line text field:
    <form name="exampleform">
    <input name="limitedtextfield" type="text" onKeyDown="limitText(this.form.limitedtextfield,this.form.countdown,10);"
    onKeyUp="limitText(this.form.limitedtextfield,this.form.countdown,10);" maxlength="10"><br>
    <font size="1">(Maximum characters: 10)<br>
    You have <input readonly type="text" name="countdown" size="3" value="10"> characters left.</font>
    </form>

    In both examples, change “exampleform” to a memorable name for your form. The first example sets a character limit of 90, whereas the second example sets a character limit of 10. Change these values to your preferred character limit. In each code snippet, change all instances of the value to ensure the code works correctly.

References

Promoted By Zergnet

Comments

Resources

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!