Js limit text box input length two restrictions (length, number of bytes)

Source: Internet
Author: User

Features:
1. display the number of words that can be entered in real time (in bytes)
2. Two restrictions (length and number of bytes)
3. The Chinese input method can be used normally without any bugs.
4. The same page can be used multiple times without interfering with each other
Limit. js Copy codeThe Code is as follows: function limit (){
Var txtNote; // text box
Var txtLimit; // input indicating the number of words
Var limitCount; // The maximum number of words.
Var isbyte; // whether to use the byte length limit (1 Chinese Character = 2 characters)
Var txtlength; // The length of the string when the limit is reached
Var txtByte;
This. init = function (){
TxtNote=this.txt Note;
Txtlimit%this.txt Limit;
LimitCount = this. limitCount;
Isbyte = this. isbyte;
TxtNote. onkeydown = function () {wordsLimit ()}; txtNote. onkeyup = function () {wordsLimit ()};
TxtLimit. value = limitCount;
}
Function wordsLimit (){
Var noteCount = 0;
If (isbyte) {noteCount = txtNote. value. replace (/[^/x00-/xff]/g, "xx "). length} else {noteCount = txtNote. value. length}
If (noteCount> limitCount ){
If (isbyte ){
TxtNote. value = txtNote. value. substring (0, txtlength + Math. floor (limitCount-txtByte)/2 ));
TxtByte = txtNote. value. replace (/[^/x00-/xff]/g, "xx"). length;
TxtLimit. value = limitCount-txtByte;
} Else {
TxtNote. value = txtNote. value. substring (0, limitCount );
TxtLimit. value = 0;
}
} Else {
TxtLimit. value = limitCount-noteCount;
}
Txtlength = txtNote. value. length; // record the length after each input
TxtByte = txtNote. value. replace (/[^/x00-/xff]/g, "xx"). length;
}
}

Page call:Copy codeThe Code is as follows: <Body>
<Input id = "txtNote"/>
You can also enter <input type = "text" id = "txtCount"/> characters
</Body>
<Mce: script type = "text/javascript"> <! --
Var lim = new limit ();
Lim.txt Note = document. getElementById ("txtNote ");
Lim.txt Limit = document. getElementById ("txtCount ");
Lim. limitCount = 20;
Lim. isbyte = true;
Lim. init ();
// --> </Mce: script>
</Html>

Text Box character length limitCopy codeThe Code is as follows: <INPUT onkeydown = if (event. keyCode = 13) event. keyCode = 9 onkeyup = "value = value. replace (/[^ 0-]/g, '');" maxLength = 11>

In this case, only the numbers and the maximum length must be 11 characters.
------ Solution --------------------------------------------------------
Are you sure you want to write the code above... How can the test fail ..
Isn't it? test there's no such thing. Now it's only limited to numbers and 11 characters.
------ Solution --------------------------------------------------------Copy codeThe Code is as follows: <INPUT onkeydown = if (event. keyCode = 13) event. keyCode = 9 onkeyup = "value = value. replace (/[^ 0-]/g, '');" maxLength = 11>

In this case, only the numbers and the maximum length must be 11 characters.
------ Solution --------------------------------------------------------Copy codeThe Code is as follows: <INPUT onkeydown = if (event. keyCode = 13) event. keyCode = 9 onkeyup = "value = value. replace (/[^ 0-]/g, '');" maxLength = 11>

In this case, only numbers and up to 11 characters can be entered ......
------ Solution --------------------------------------------------------Copy codeThe Code is as follows: if (document. form. mobile. value = "")
{
Alert ("your input is incorrect ");
Document. forma. mobile. focus ();
Return false;
}
Else
{
If (! /^ \ D {11} $. test (document. form. mobile. value ))
{Alert ("the number of digits you entered is incorrect ");
Document. forma. mobile. focus ();
Return false;
}
}

I don't know if this works...
------ Solution --------------------------------------------------------
HTML codeCopy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html>
<Head>
<Title> control the number of characters in textarea </title>
<Style>
<! --
Form {
Padding: 0px;
Margin: 0px;
Font: 14px Arial;
}
Input.txt {/* set the text box separately */
Border: 1px inset # limit 8B;
Background-color: # ADD8E6;
}
Input. btn {/* button set separately */
Color: # pai8b;
Background-color: # ADD8E6;
Border: 1px outset # limit 8B;
Padding: 1px 2px 1px 2px;
}
-->
</Style>
<Script language = "javascript">
Function LessThan (oTextArea ){
// Return the boolean value required for the number of characters in the text box
Return oTextArea. value. length <oTextArea. getAttribute ("maxlength ");
}
</Script>
</Head>
<Body>
<Form method = "post" name = "myForm1" action = "addInfo. aspx">
<P> <label for = "name"> enter your name: </label>
<Input type = "text" name = "name" id = "name" class = "txt" value = "name" maxlength = "10"> </p>
<P> <label for = "comments"> I want to leave a message: </label> <br>
<Textarea name = "comments" id = "comments" cols = "40" rows = "4" maxlength = "50" onkeypress = "return LessThan (this ); "> </textarea> </p>
<P> <input type = "submit" name = "btnSubmit" id = "btnSubmit" value = "Submit" class = "btn">
<Input type = "reset" name = "btnReset" id = "btnReset" value = "Reset" class = "btn"> </p>
</Form>
</Body>
</Html>

------ Solution --------------------------------------------------------
HTML codeCopy codeThe Code is as follows: <! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Title> phone number detection </title>
<Meta name = "Generator" content = "EditPlus">
<Meta name = "Author" content = "Dsmart">
<Meta name = "Keywords" content = "">
<Meta name = "Description" content = "">
</Head>
<Body>
Phone number: <input id = "phone" type = "value" onblur = "checkPhone ()"/>
<Script type = "text/javascript">
Function checkPhone (){
Var phone = document. getElementById ("phone"). value;
If (phone = ""){
Alert ("Enter the number ");
} Else if (! (/^ \ D {11 }$/g. test (phone) {// enter an integer of 11
//} Else if (! (/^ 13 \ d {9} $/g. test (phone) | (/^ 15 [0-35-9] \ d {8} $/g. test (phone) | (/^ 18 [05-9] \ d {8} $/g. test (phone )))){
// Check whether the mobile phone number entered by the user is correct. The phone numbers include 13 series and 150-159 (except 154), 180, 185, 186, 187, 188, and 189. The length is 11 characters.
Alert ("Please input 11 integers ");
} Else {
Alert ("OK ");
}
}
</Script>
</Body>
</Html>

------ Solution --------------------------------------------------------Copy codeThe Code is as follows: <INPUT onkeydown = if (event. keyCode = 13) event. keyCode = 9 onkeyup = "value = value. replace (/[^ 0-]/g, '');" maxLength = 11>

In this case, only numbers and up to 11 characters can be entered ......
In this way, there is a prompt, but it does not have a limit. When the input is less than 11 bits, it can still be submitted. Is this controlled by js?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.