Implement textarea limit input word count (can only enter 10 in Chinese, full ASCII code can enter 20)

TextArea is called a text field, also known as a text area, which is a multi-line text input control with a scrollbar, which is often used in the submission form of a Web page. Unlike a single-line TextBox text control, it cannot limit the number of words through the MaxLength property, and it must seek other ways to limit it to meet the predetermined requirements.

The usual practice is to use the # scripting language to implement the word input limit for textarea text fields, which is simple and practical. Assuming we have an TEXTAREA text area with ID txta1, we can limit its keyboard input to 10 characters (kanji or other small-angle characters) with the following code:

Its principle is to monitor the text area of the specified ID number by the KeyDown (keyboard key Press) event, it can be imagined that it can only limit the keyboard input, if the user by the right mouse button paste in the Clipboard text, it cannot control the word count.

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

You can find similar to the above other JS scripts on the Internet, they no matter how excellent, the principle is the same, through the KeyDown, KeyUp or keypress keyboard key manipulation 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 words in textarea, we have to add another lock for the Web page-Disabling the right mouse button, this will undoubtedly pay extra overhead, but also may be the Web page creator is 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 care about the value of the monitored element, avoid the source of the input, so that we can be more ideal to achieve the purpose of limiting the number of words. It belongs to the JS category, can be nested in the table of the single-box representation of the use, the following is the code and effect style, you can test the input as above, you will find it really achieve the purpose: no matter what type of input, it can only enter 100 characters (kanji or other pee symbols):

Code:

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

Of course, in order to be more insured, the background script processing the form data should also check the submitted data again, if the number of words beyond the preset amount of processing, so as to achieve the purpose of real limit words. Finish

Another way 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= "Ten" 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 characters." Put it in the textarea. Indicates the maximum number of bytes to enter.

For example: <textarea title= "The textarea width must less than characters." Cols=50 rows=10 name= "comment" id= "Commentarea" Onkeydown= "Limittextarea (This)" onkeyup= "Limittextarea (This)" onkeypress= "Limittextarea (This)" ></textarea >

From the online excerpt, hope to everyone has help oh ~ ~

Http://www.cnblogs.com/butterfly/archive/2009/04/27/1444598.html

Implement textarea limit input word count (can only enter 10 in Chinese, full ASCII code can enter 20)