js Realizes textarea Limiting the Number of Input Words

Realize textarea limited input words (including Chinese can only input 10, full ASCII code can input 20)

textarea is called a text field, also known as a text area, that is, a multi-line text input control with scroll bars, which is often used in the submission form of 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 default requirements.

The common practice is to use the # scripting language to implement the textarea text field word input limit, simple and practical. Suppose we have an textarea text area where id is txta1, we can limit its keyboard input words to 10 words (Chinese characters or other small-angle characters) through 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 >  

Its principle is to monitor the text area with specified id number by keydown (keyboard key press) event. As you can imagine, it can only limit keyboard input. If the user pastes the text in the clipboard through the right mouse button, it cannot control the number of words.

Through keyboard input, only 10 words can be entered in the above text area. However, our goal has not been achieved! Please feel free to copy some text and try to paste it with the right mouse button to see what happened.

You can find other JS scripts similar to the above on the Internet. No matter how good they are, The principle is the same, By monitoring the input of text area through keyboard key operation events such as keydown, keyup or keypress, it is impossible to prevent the pasting of the right mouse button. Therefore, if we want to really limit the number of words in textarea, we have to add another lock to the web page-disable the right mouse button, which undoubtedly has to pay extra overhead, and it may also be something that the web page maker is not willing to do. In fact, there is a simpler way to use the onpropertychange attribute.

onpropertychange can be used to judge the value value of a predetermined element. When the value value of an element changes, the judgment event will be triggered. Only the value value of the monitored element is concerned, avoiding the input source, thus achieving our purpose of limiting the number of words ideally. It belongs to the category of JS and can be nested in the box representation of the form. The following is the code and effect style. You can test the input as above, and you will find that it really achieves its purpose: No matter what way you enter, it can only enter 100 words (Chinese characters or other minor symbols):

Code:

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

Of course, in order to be more safe, the background script program that processes 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 purpose of truly limiting the number of words. (End)

Another method to realize textarea limited input words (including Chinese can only input 10 words, all ASCII code can input 20 words)

<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> 

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." Inside textarea prompts for the maximum number of bytes.

For example:

<textarea title="The textarea width must less than 300 characters." cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>