Textarea is called text field, also known as text area, which is a multi-line text input control with scroll bars, which is often used in web page submission forms. Unlike a single-line text box text control, it cannot limit the number of words through the maxlength property, and for this purpose, other methods must be sought to limit them to meet the preset requirements.
The usual practice is to use #script language to implement word input limits on textarea text fields, which is simple and practical. Suppose we have a textarea text area with id txta1, we can limit the number of words input on its keyboard to 10 characters (Chinese characters or other small corner characters):
<script language="#" type="text/ecmascript"> window.onload = function() { document.getElementById('txta1').onkeydown = function() { if(this.value.length >= 10) event.returnValue = false; } } </script>Its principle is to monitor the text area of the specified id number by monitoring the keydown event. It can be imagined that it can only limit keyboard input. If the user pastes the text in the clipboard by right-clicking the mouse, it cannot control the number of words.
Through the keyboard input, only 10 words can be entered in the above text area. However, our goal has not been achieved! Please copy some text casually and try to paste it with the right mouse button to see what's going on.
You can find other JS scripts like the above mentioned above on the Internet. No matter how excellent they are, their principles are the same. Monitoring the input of the text area by operating keyboard keys such as keydown, keyup or keypress can not prevent the right-click from pasting. For this reason, if we must really limit the number of words in textarea, we have to add another lock to the web page - disable the right-click, which undoubtedly requires additional overhead, and it may also be something that web page makers may not be willing to do. Actually, there is an easier way to use the onpropertychange property.
Onpropertychange can be used to judge the value of a predetermined element. When the value of the element changes, the judgment event will be triggered. It only cares about the value of the monitored element and avoids the source of the input, so that we can achieve the purpose of limiting the number of words in a relatively ideal way. It belongs to the JS category and can be used in nested form box area representatives. The following are the code and effect styles. You can test the input like the above. You will find that it really achieves its purpose: no matter what method you enter, it can only enter 100 characters (Chinese characters or other small solution symbols):
Code:
<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" cols="60" name="txta" rows="8"></textarea>
Of course, in order to be more secure, the background script program that processes form data should also check the submitted data again. If the number of words exceeds the preset number, it will be processed accordingly, so as to achieve the purpose of truly limiting the number of words. (over)
Another method to implement textarea to limit the number of input words (including Chinese, only 10 can be entered, and all ASCII codes can be entered)
<script> function check() { var regC = /[^ -~]+/g; var regE = //D+/g; var str = t1.value; if (regC.test(str)){ t1.value = t1.value.substr(0,10); } if(regE.test(str)){ t1.value = t1.value.substr(0,20); } } </script> <textarea maxlength="10" id="t1" onkeyup="check();"> </textarea>There is another way:
function textCounter(field, maxlimit) { if (field.value.length > maxlimit){ field.value = field.value.substring(0, maxlimit); }else{ document.upbook.remLen.value = maxlimit - field.value.length; } }<textarea name=words cols=19 rows=5 class=input1 onPropertyChange= "textCounter(upbook.words, 50) "> textarea> Number of words remaining: <input name=remLen type=text id= "remLen " style= "background-color: #D4D0C8; border: 0; color: red " value=50 size=3 maxlength=3 readonly>
function LimitTextArea(field){ maxlimit=200; if (field.value.length > maxlimit) field.value = field.value.substring(0, maxlimit);}<textarea cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>
title="The textarea width must less than 300 characters." It prompts to enter the maximum number of bytes in textarea.
For example:
<textarea cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>