TextArea cannot limit the number of words by maxlength attributes _javascript Tips

TextArea is called a text field, also known as a text area, a multiline text input control with a scroll bar that is often used in a Web page submission form. Unlike a single-line text box, the text control does not limit the number of words by the MaxLength property, so you must find other ways to limit it to meet the preset requirements.

The common practice is to use the # scripting language to achieve the TextArea text field of the word input restrictions, simple and practical. Assuming we have a textarea text area with an ID of txta1, we can limit its keyboard input words to 10 words (Chinese characters or other small characters) by using the following code:

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

The principle is to monitor the text area of a specified ID number by the KeyDown (keyboard key Press) event, which can be imagined to restrict keyboard input, and it cannot control the number of words if the user pastes text from the Clipboard by right-clicking the mouse.

With keyboard input, the above text area can only enter 10 words. However, our purpose has not been achieved! Please casually copy some text, try to paste with the right mouse button to see what happened.

You can find similar to the above other JS script, no matter how good, its principle is the same, through the KeyDown, KeyUp or keypress, such as keyboard key operation events to monitor the text area input, can not prevent the right mouse button paste, for this, If you have to really limit the number of textarea, we have to add another lock for the page--Disable the right mouse button, which undoubtedly has to pay extra cost, but also may be the Web page makers are not necessarily willing to do. In fact, there is a simpler way to use the Onpropertychange property.

Onpropertychange can be used to determine the value of a predetermined element, when the value of the element is changed to determine the event will be triggered, only concerned about the value of the monitored elements, avoid the input of the source, so that we can more ideally achieve our limit of the number of words. It belongs to the JS category, can be nested in the form of a single box in the table, the following is the code and effect style, you can test the input as above, you will find that it really achieves the purpose: No matter how the input, it can only enter 100 words (Chinese characters or other pee symbols):

Code:

<textarea onpropertychange= "if (value.length>100) value=value.substr (0,100)" class= "SmallArea" cols= "a" name= "Txta" rows= "8" ></textarea>

Of course, in order to more insurance, the processing of the form data background script should also be submitted to the data to be tested again, if the number of words exceeded the preset amount of the corresponding treatment, so as to achieve the real limit of words. Finish

Another method to achieve textarea limit input words (including Chinese can only enter 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= "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)" > textarea> 
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 less than." Put it in the characters. Prompts for the maximum number of bytes.

For example:

<textarea title= "The textarea width must less than." Characters cols=50 rows=10 "name=" comment "id=" Commentarea Eydown= ' Limittextarea (this) ' onkeyup= ' Limittextarea (this) ' onkeypress= ' Limittextarea (this) ></textarea>