Textarea cannot limit the number of words by the maxlength attribute

A textarea, also known as a text field, is a multi-line text input control with a scroll bar and is often used in submission forms on web pages. Unlike the single-line text box text control, it cannot limit the number of words through the maxlength property, so you must find other ways to limit it to meet the preset requirements.

The general practice is to use the # scripting language to implement word limitation on the textarea text field, which is simple and practical. Suppose we have a textarea textarea with the id of txta1, we can limit its keyboard input to 10 words (Chinese characters or other small corner characters) by the following code:

<script language="#" type="text/ecmascript"> 
window.onload = function() 
{ 
document.getElementById('txta1').onkeydown = function() 
{ 
if(this.value.length >= 10) 
event.returnValue = false; 
} 
} 
</script>

It works by monitoring the text area of the specified id number through the keydown event. As you can imagine, it can only limit the keyboard input, and it cannot control the word count if the user pastes the text in the clipboard with the right mouse button.

Through the keyboard input, the above text area can only be entered 10 words. But we didn't get there! Just copy some text, try pasting with your right mouse button, and see what happens.

You can find on the Internet is similar to the above other JS script, they no matter how good, its principle is the same, through to the keydown, keyup or keyboard keys of operation such as keypress events to monitor the input of the text area, could not prevent the right mouse button to paste, to do this, if must really limit the words textarea, we have for the web pages to add another lock - disable the mouse right key, it must pay extra overhead, at the same time can also be web designers don't want to do. Actually, there is an easier way to use the onpropertychange property.

Onpropertychange can be used to determine the value value of the predetermined element, and when the value value of the element changes, the judgment event will be triggered. We only care about the value value of the monitored element, avoiding the source of input, so that we can ideally achieve our goal of word limit. It belongs to the JS category, can be nested in the form box area representation, the following is the code and effect sample, you can test the input like the above, you will find that it really achieve the purpose: no matter how you input, it can only enter 100 words (Chinese characters or other symbols) :

Code:

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>

Of course, to be safe, the background script that handles the form data should also check the submitted data again, and if the number of words exceeds the preset number, it should be processed accordingly, so as to achieve the real word limit. (after)

Another method to achieve textarea limited input words (including Chinese input of 10, full ASCII code can enter 20)

<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's 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> 
 The remaining words : <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 be less than 300 characters."