Sample Code for JavaScript Implementation of textarea to limit the number of words entered

This article describes how to limit the number of words input by textarea in JavaScript. It has good reference value. Let's take a look at it below. This article mainly introduces the principle and method of implementing textarea to limit the number of words input in JavaScript. It has good reference value. Let's take a look at it together with the small Editor.

Implement textarea to limit the number of words to be entered (only 10 Chinese characters can be entered, and 20 full ASCII codes can be entered)

Textarea is called a text field, also known as a text field, that is, a multi-line text input control of a scroll bar. It is often used in Webpage submission forms. Unlike the single-line text box text control, it cannot limit the number of words through the maxlength attribute. Therefore, you must seek other methods to limit the number of words to meet the preset requirements.

The general practice is to use the # script language to limit the number of words in the textarea text field, which is simple and practical. Suppose we have a textarea region with id txta1. We can use the following code to limit its keyboard input to 10 characters (Chinese characters or other small-angle characters ):

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

The principle is to monitor the hidden area of the specified ID by keydown (press the keyboard position). As you can imagine, it can only restrict keyboard input. If you right-click and paste the text in the clipboard, it cannot control the number of words.

You can enter only 10 words on the keyboard. However, our goal is not achieved! Copy some text at will and right-click and paste it to see what happened.

You can find other JS scripts similar to the above on the Internet. No matter how good they are, their principles are the same, the keydown, keyup, or keypress operation events are used to monitor the input in the hidden area, which cannot prevent the right-click pasting. Therefore, if you must really limit the number of words in textarea, we also need to add another lock for the web page-Disable the right mouse button, which undoubtedly requires additional overhead, and may also be something that the Web Page Maker is not necessarily willing to do. In fact, there is a simpler way to use the onpropertychange attribute.

Onpropertychange can be used to determine the value of a predetermined element. When the value of an element changes, the event will be triggered. It only cares about the value of the monitored element and avoids the input source, in this way, we can achieve our goal of limiting the number of words. It belongs to the JS category and can be nested in the representation of the form box. The following are code and effect styles. You can test the input as above, and you will find that it truly achieves the goal: no matter how it is entered, it can only enter 100 characters (Chinese characters or other minor symbols ):

Code:

Of course, in order to be more secure, the background scripting program for processing form data should also perform another check on the submitted data. If the number of words exceeds the preset quantity, the script will process the data accordingly, in this way, we can truly limit the number of words. (End)

Another method is to limit the number of words to be entered in textarea (only 10 Chinese characters can be entered, and 20 full 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》  

Another method is as follows:

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> </pre> <p> </p> <p> remaining words: </p> <p class = "jb51code"> </p> <pre class = "brush: js; toolbar: false; "> <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) ">

Title = "The textarea width must less than 300 characters." In textarea, The system prompts you to enter The maximum number of bytes.

For example:

The above is the details of the sample code for JavaScript Implementation of textarea to limit the number of words entered. For more information, see other related articles in the first PHP community!