Limit the number of characters (jquery and native JS)

Known bugs:
In Ubuntu, The onkeyup event becomes invalid. For details, see the bug of onkeyup/onkeydown invalidation for Chinese Input in Ubuntu.
View DEMO: click here to view DEMO
Core code: Copy codeThe Code is as follows: // The native JavaScript version
Window. onload = function (){
Var js = document. getElementById ('js'); // obtain the text field
Var info = document. getElementsByTagName ('P') [0]; // gets the element to insert the prompt.
Var submit = info. getElementsByTagName ('input') [0]; // obtain the submit button
Var max = js. getAttribute ('maxlength'); // obtain the maximum length of a restricted input.
Var tips = document. createElement ('span '); // create a prompt span
Var val, cur, count, warn;
Submit. disabled = true; // It cannot be submitted by default.
Tips. innerHTML = 'You can also enter <em>' + max + '</em> characters <font> [numbers of Chinese and English characters not distinguished] </font> ';
If (max ){
Js. onkeyup = js. onchange = function (){
Submit. disabled = false;
If (info. lastChild. nodeName! = 'Span ') info. appendChild (tips); // prevents a prompt message from being inserted every time it pops up.
Count = info. getElementsByTagName ('em ') [0]; // convert the partition according to the input number
Warn = info. getElementsByTagName ('font') [0]; // subtitle
Val = this. value;
Cur = val. length;
// For (var I = 0; I <val. length; I ++) {// This loop is used to judge Chinese and English characters, but it is not recommended to do that.
// If (val. charCodeAt (I)> 255) cur + = 1;
//}
If (cur = 0) {// when the default length is 0, the number of inputs is the default maxlength value, which cannot be submitted at this time.
Count. innerHTML = max;
Submit. disabled = true;
Warn. innerHTML = 'do not distinguish Chinese and English character number ';
} Else if (cur <max) {// when the default value is smaller than the limit, the number of inputs can be max-cur.
Count. innerHTML = max-cur;
Warn. innerHTML = 'do not distinguish Chinese and English character number ';
} Else {
Count. innerHTML = 0; // when the default value is greater than or equal to the limit, insert a prompt message and intercept the value within the limit.
Warn. innerHTML = 'no more input! ';
This. value = val. substring (0, max); // The previous this. value cannot use the variable val. They are no longer the same value.
}
}
}
}
// Based on the jQuery version
$ (Function (){
Var _ area = $ ('textarea # jq ');
Var _ info = _ area. next ();
Var _ submit = _ info. find (': submit ');
Var _ max = _ area. attr ('maxlength ');
Var _ val, _ cur, _ count, _ warn;
_ Submit. attr ('Disabled ', true );
_ Area. bind ('keyup change', function () {// bind the keyup and change events
_ Submit. attr ('Disabled ', false );
If (_ info. find ('span '). size () <1) {// avoid inserting a prompt message every time a bullet occurs.
_ Info. append ('<span> You can also enter <em>' + _ max + '</em> characters <font> [numbers of Chinese and English characters not distinguished] </font> </span> ');
}
_ Val = $ (this). val ();
_ Cur = _ val. length;
_ Count = _ info. find ('em ');
_ Warn = _ info. find ('font ');

If (_ cur = 0) {// when the default length is 0, the number of inputs is the default maxlength value, which cannot be submitted at this time
_ Count. text (_ max );
_ Submit. attr ('Disabled ', true );
} Else if (_ cur <_ max) {// when the default value is smaller than the limit, the number of inputs can be max-cur.
_ Count. text (_ max-_ cur );
_ Warn. text ('Do not distinguish Chinese and English character number ');
} Else {// when the default value is greater than or equal to the limit, insert a prompt and intercept the value within the limit.
_ Count. text (0 );
_ Warn. text ('cannot be entered again! ');
$ (This). val (_ val. substring (0, _ max ));
}
});
});

Online test code:<Meta charset = "gb2312"> <meta name = "author" content = "Mr. think qingbird "> <meta name =" keywords "content =" Mr. think, front-end development, WEB front-end, front-end technology, front-end development, WEB front-end development, user experience, Website planning, website optimization, qingbird, javascript, jQuery, css, xhtml, html, UE, SEO, Mr. think blog, qingbird blog, PHP enthusiast, Bluebirdsky "> <meta name =" description "content =" Mr. think's blog, named qingbird, is now focused on WEB Front-end development and is also a PHP enthusiast. love thinking, a little code cleanliness, raw crab legs, love meat. here is where I record knowledge and things in my life. "> <link rel =" pingback "href =" http://mrthink.net/xmlrp C. php "> <link rel =" alternate "type =" application/rss + xml "title =" Mr. think blog RSS Feed "href =" http://mrthink.net/feed/ "> <br/> <style>/* reset css */body {font-size: 0.8em; letter-spacing: 1px; font-family: "Microsoft YaHei"; line-height: 1.8em} div, h2, p, fieldset, legend, form, textarea, span, em, sub {margin: 0; padding: 0} input {font: 12px/1.5 tahoma, arial, sans-serif; vertical-align: middle;} h1 {font-size: 1em; font-we Ight: normal;} h1 a {background: #047; padding: 2px 3px; color: # fff; text-decoration: none;} h1 a: hover {background: # a40000; color: # fff; text-decoration: underline} h3 {color: #888; font-weight: bold; font-size: 1em; margin: 1em auto; position: relative}/* demo css */fieldset {border: 1px solid # ccc; width: 720px} fieldset legend {background: # a40000; color: # fff; text-align: center; padding: 0 8px; margin-left: 25px} fi Eldset form {background: # eee; border: 1px solid # ccc; margin: 10px; padding: 10px 10px 0} fieldset form textarea {width: 670px; height: 60px; border: 1px solid # ccc; line-height: 25px; padding: 3px; overflow: hidden;} fieldset form textarea: focus {border: 1px solid # a40000} fieldset form p {height: 30px; margin: 2px 0; * margin: 3px 0 3px-5px} fieldset form p span {padding-left: 8px} fieldset form p span em {font-style: Normal; font-weight: bolder; color: #047; padding: 0 3px} fieldset form p span font {color: blue; font-size: 10px} </style> <p> <br/> Mr. think's personal blog <br/> @ focus on front-end technologies, love PHP, and advocate simple life. return to the Article Page: restrict the number of characters (jQ and native JS) @ Mr. think <p> <! -- DEMO start --> </p> <fieldset> <legend> native JavaScript version </legend> </fieldset> <p style = "color: # fff ">» I used to separate rows. Ignore me ^-^ </p> <! -- // Native JavaScript version --> </p> <fieldset> <legend> Based on jQuery version </legend> </fieldset> <p> <! -- // Based on the jQuery version --> <! -- DEMO end -->