Javascript Restricted Input scripts

Last Update:2013-10-16 Source: Internet

Author: User

Tags microsoft frontpage

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. Only Chinese characters can be entered
<Input onkeyup = "value = value. replace (/[^ \ u4E00-\ u9FA5]/g, '')" onbeforepaste = "clipboardData. setData ('text', clipboardData. getData ('text '). replace (/[^ \ u4E00-\ u9FA5]/g, '')">

2. Only numbers can be entered:
<Input onkeyup = "value = value. replace (/[^ \ d]/g, '')" onbeforepaste = "clipboardData. setData ('text', clipboardData. getData ('text '). replace (/[^ \ d]/g, '')">
Chinese characters cannot be entered.
<Input type = "text" style = "ime-mode: disabled">
Enter a number and a decimal point:
Onkeyup = "value = value. replace (/[^ \ d {1 ,}\. \ d {1 ,}| \ d {1,}]/g ,'')"
Javascript can only enter numbers and ":". <input type = text id = "aa1" onkeyup = "this. value = this. value. replace (/[^ \ d &:]/g, '')" onblur = "this. value = this. value. replace (/[^ \ d &:]/g, '')" onafterpaste = "this. value = this. value. replace (/[^ \ d &:]/g, '')"/>
Only numbers and ":" are allowed. For example, they can be used when you enter the time.
<Input type = text id = "aa" onkeyup = "value = value. replace (/[^ \ w & =] | _/ig, '')" onblur = "value = value. replace (/[^ \ w & =] | _/ig, '')"/>
Only letters and equal signs are allowed, and Chinese characters are not allowed.
Other things:
Only scripts with numbers can be entered --
1. <input onkeyup = "this. value = this. value. replace (/\ D/g ,'')"
Onafterpaste = "this. value = this. value. replace (/\ D/g,'') ">
The upper half means that only numbers can be typed on the keyboard, and only numbers can be pasted in the lower half.
2. <input name = txt1 onchange = "if (/\ D /. test (this. value) {alert ('only numbers allowed '); this. value = '';}">
3. <input onkeyup = "if (isNaN (value) execCommand ('undo ')" onafterpaste = "if (isNaN (value) execCommand ('undo')">
Only numbers and English --
Function isregname (checkobj)
{
Var checkOK = "0123456789-_ abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ ";
Var checkStr = checkobj;
Var allValid = true;
Var decPoints = 0;

For (I = 0; I <checkStr. length; I ++)
{
Ch = checkStr. charAt (I );
For (j = 0; j <checkOK. length; j ++)
If (ch = checkOK. charAt (j ))
Break;
If (j = checkOK. length)
{
AllValid = false;
Break;
}
}
Return (allValid)
}
----------------
If (! (Isregname (obj. loginname. value ))){
Alert ("[Member Code] does not comply with the specifications. The Member Code can only be English letters or numbers ");
Obj. loginname. focus ();
Return (false );
}
If (! (Isregname (obj. password. value ))){
Alert ("[Password] does not comply with the specifications. The password can only be English letters or numbers ");
Obj. password. focus ();
Return (false );
}

4. javascript can only enter input boxes of English letters and numbers
<Input onkeyup = "value = value. replace (/[\ W]/g, '')" onbeforepaste = "clipboardData. setData ('text', clipboardData. getData ('text '). replace (/[^ \ d]/g, '')">
5. You can use Javascript to check the text box and filter out non-0-9 characters.
<Script language = "javascript" event = "onkeydown" for = "document">
If (event. srcElement. name = 'textbox1 ')
{
If (! KeyIsNumber (event. keyCode ))
{
Return false; // The most important sentence
}
}
</Script>
<Script language = "javascript">
Function KeyIsNumber (KeyCode)
{
// If the entered character is between 0-9, or the backspace or DEL key
If (KeyCode> 47) & (KeyCode <58) | (KeyCode = 8) | (KeyCode = 46 ))
{
Return true;
}
Else
{
Return false;
}
}
</Script> [url = http://blog.csdn.net/xujh/admin/editposts.aspx#/url]

6. Only the IP address format can be entered in the text box.
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/HTML; charset = gb2312">
<Meta name = "GENERATOR" content = "Microsoft FrontPage 4.0">
<Meta name = "ProgId" content = "FrontPage. Editor. Document">
<Style>
. A3 {width: 30; border: 0; text-align: center}
</Style>
<Script>
Function mask (obj ){
Obj. value = obj. value. replace (/[^ \ d]/g ,'')
Key1 = event. keyCode
If (key1 = 37 | key1 = 39)
{Obj. blur ();
Nextip = parseInt (obj. name. substr (2, 1 ))
Nextip = key1 = 37? Nextip-1: nextip + 1;
Nextip = nextip> = 5? 1: nextip
Nextip = nextip <= 0? 4: nextip
Eval ("ip" + nextip + ". focus ()")
}
If (obj. value. length> = 3)
If (parseInt (obj. value)> = 256 | parseInt (obj. value) <= 0)
{
Alert (parseInt (obj. value) + "ip address error! ")
Obj. value = ""
Obj. focus ()
Return false;
}
Else
{Obj. blur ();
Nextip = parseInt (obj. name. substr (2, 1) + 1
Nextip = nextip> = 5? 1: nextip
Nextip = nextip <= 0? 4: nextip
Eval ("ip" + nextip + ". focus ()")
}
}
Function mask_c (obj)
{
ClipboardData. setData ('text', clipboardData. getData ('text'). replace (/[^ \ d]/g ,''))
}

</Script>
<Title> ip address input </title>

</Head>
<Body> ip address input
<Div style = "border-width: 1; border-color: balck; border-style: solid; width: 165; font-size: 9pt">
<Input type = text name = ip1 maxlength = 3 class = a3 onkeyup = "mask (this)" onbeforepaste = mask_c ()>.
<Input type = text name = ip2 maxlength = 3 class = a3 onkeyup = "mask (this)" onbeforepaste = mask_c ()>.
<Input type = text name = ip3 maxlength = 3 class = a3 onkeyup = "mask (this)" onbeforepaste = mask_c ()>.
<Input type = text name = ip4 maxlength = 3 class = a3 onkeyup = "mask (this)" onbeforepaste = mask_c ()>
</Div>
</Body>
</HTML>

7. Restrict the date controls in the input format
　　
----- Another idea of the date control is to restrict the date control in the input format ----- there are many date controls on the Internet for Date input. Here, I tried to mimic the Date input control in some CS programs and consider the date format input from another perspective, that is, the input date is in a fixed format, and the user can only enter data in the place specified by the program.
The routine is as follows. I hope it will be helpful to you ~~~ (The time is too short. The routine is ie only)
<Script language = 'javascript '>
/**//*
* Added by LiuXiaoChong 2005.4.25
* Restrict input date controls
* Param: txtName is the name of the text box to be restricted.
*
* Function Description: 1. Only numbers can be entered.
* 2. The left and right keys can move the editing focus.
* 3. The up/down key can fine-tune the data
* 4. The control contains valid date verification.
*/
Function regDateControl (txtName)
{
Var oInput = document. getElementById (txtName );
OInput. middleChar = '-';
OInput. selectIndex = 1; // year selected by default
OInput. maxLength = 10;
OInput. style. imeMode = 'Disabled ';
OInput. value = specialText_GetDate (oInput. middleChar );
OInput. charWidth = oInput. createTextRange (). boundingWidth/oInput. maxLength;
// Register a click event
OInput. onclick = specialText_ClickEvent;
OInput. onkeydown = specialText_KeyDownEvent;
OInput. onfocus = function () {specialText_SelectYear (this );}
OInput. onblur = function ()
{
SpecialText_validYear (this );
SpecialText_validMonth (this );
SpecialText_validDate (this );
}
// Right-click and drag the screen
OInput. oncontextmenu = function () {return false ;}
OInput. ondrop = function () {return false ;}
}
// Click the mouse to split the date based on the position.
Function specialText_ClickEvent ()
{
Event. cancelBubble = true;
SpecialText_validYear (this );
SpecialText_validMonth (this );
SpecialText_validDate (this );
If (event. offsetX <= specialText_getCharWidth (this. charWidth, 4 ))
SpecialText_SelectYear (this );
Else if (event. offsetX> specialText_getCharWidth (this. charWidth, 4)
& Event. offsetX <= specialText_getCharWidth (this. charWidth, 7 ))
SpecialText_SelectMonth (this );
Else if (event. offsetX> specialText_getCharWidth (this. charWidth, 7 ))
SpecialText_SelectDate (this );
}
// Select the year
Function specialText_SelectYear (oInput)
{
Var oRange = oInput. createTextRange ();
ORange. moveStart ('character ', 0 );
ORange. moveEnd ('character ',-6 );
// Indicates that the Year is selected.
OInput. selectIndex = 1;
ORange. select ();
}
// Select the month
Function specialText_SelectMonth (oInput)
{
Var oRange = oInput. createTextRange ();
ORange. moveStart ('character ', 5 );
ORange. moveEnd ('character ',-3 );
// Indicates the selected month
OInput. selectIndex = 2;
ORange. select ();
}
// Selected date
Function specialText_SelectDate (oInput)
{
Var oRange = oInput. createTextRange ();
ORange. moveStart ('character ', 8 );
// Indicates the selected date.
OInput. selectIndex = 3;
ORange. select ();
}
// Verify the validity of the year
Function specialText_validYear (oInput)
{
Var arrValue = oInput. value. split (oInput. middleChar );
Var strYear = arrValue [0];
If (parseInt (strYear, 10) = 0)
ArrValue [0] = 2000;
// If the year is less than 4 digits, the value is increased based on 2000.
Else if (strYear. length <4)
ArrValue [0] = 2000 + parseInt (strYear, 10 );
OInput. value = arrValue. join (oInput. middleChar );
}
// Verify the validity of a month
Function specialText_validMonth (oInput)
{
Var arrValue = oInput. value. split (oInput. middleChar );
Var strMonth = arrValue [1];
// If the input value for the month is 0, it will be processed on January 1, January.
If (parseInt (strMonth, 10) = 0)
ArrValue [1] = '01 ';
// If the month is one digit, the first digit is 0.
Else if (strMonth. length <2)
ArrValue [1] = '0' + strMonth;
// If the month is later than December, it is automatically converted to December
Else if (parseInt (strMonth, 10)> 12)
ArrValue [1] = '12 ';
OInput. value = arrValue. join (oInput. middleChar );
}
// Verify the validity of the date
Function specialText_validDate (oInput)
{
Var arrValue = oInput. value. split (oInput. middleChar );
Var strYear = arrValue [0];
Var strMonth = arrValue [1];
Var strDate = arrValue [2];
Var intMonth = parseInt (strMonth, 10 );
If (parseInt (strDate, 10) = 0)
ArrValue [2] = '01 ';
Else if (strDate. length <2)
ArrValue [2] = '0' + strDate;
Else
{
// If the maximum number of days in a month is exceeded, set it to the maximum number of days.
Var monthMaxDates = specialText_getMonthDates (strYear, strMonth );
If (parseInt (strDate, 10)> monthMaxDates)
ArrValue [2] = monthMaxDates;
}
OInput. value = arrValue. join (oInput. middleChar );
}
Function specialText_YearAdd (oInput, isMinus)
{
Var arrValue = oInput. value. split (oInput. middleChar );
Var strYear = arrValue [0];
If (isMinus)
{
ArrValue [0] = parseInt (strYear, 10)-1;
If (parseInt (arrValue [0], 10) <1)
ArrValue [0] = '000000 ';
}
Else
ArrValue [0] = parseInt (strYear, 10) + 1;
OInput. value = arrValue. join (oInput. middleChar );
SpecialText_validYear (oInput );
SpecialText_SelectYear (oInput );
}
Function specialText_MonthAdd (oInput, isMinus)
{
Var arrValue = oInput. value. split (oInput. middleChar );
Var strMonth = arrValue [1];
If (isMinus)
{
ArrValue [1] = parseInt (strMonth, 10)-1;
If (parseInt (arrValue [1], 10) = 0)
ArrValue [1] = '12 ';
}
Else
{
ArrValue [1] = parseInt (strMonth, 10) + 1;
If (parseInt (arrValue [1], 10) = 13)
ArrValue [1] = '01 ';
}
OInput. value = arrValue. join (oInput. middleChar );
SpecialText_validMonth (oInput );
SpecialText_SelectMonth (oInput );
}
Function specialText_DateAdd (oInput, isMinus)
{
Var arrValue = oInput. value. split (oInput. middleChar );
Var strYear = arrValue [0];
Var strMonth = arrValue [1];
Var strDate = arrValue [2];
Var monthMaxDates = specialText_getMonthDates (strYear, strMonth );
If (isMinus)
{
ArrValue [2] = parseInt (strDate, 10)-1;
If (parseInt (arrValue [2], 10) = 0)
ArrValue [2] = monthMaxDates;
}
Else
{
ArrValue [2] = parseInt (strDate, 10) + 1;
If (parseInt (arrValue [2], 10) = (monthMaxDates + 1 ))
ArrValue [2] = '01 ';
}
OInput. value = arrValue. join (oInput. middleChar );
SpecialText_validDate (oInput );
SpecialText_SelectDate (oInput );
}
Function specialText_KeyDownEvent ()
{
// If you press the number key
If (event. keyCode >=48 & event. keyCode <= 57) |
(Event. keyCode> = 96 & event. keyCode <= 105 ))
{
Var oRange = document. selection. createRange ();
If (oRange. text. indexOf (this. middleChar )! =-1)
Event. returnValue = false;
Else
Event. returnValue = true;
}
// If you press the direction key
Else if (event. keyCode >=37 & event. keyCode <= 40)
{
Event. returnValue = false;
Var keyCode = event. keyCode;
// Left click
If (keyCode = 37)
{
If (this. selectIndex = 1)
{
SpecialText_validYear (this );
SpecialText_SelectDate (this );
}
Else if (this. selectIndex = 2)
{
SpecialText_validMonth (this );
SpecialText_SelectYear (this );
}
Else if (this. selectIndex = 3)
{
SpecialText_validDate (this );
SpecialText_SelectMonth (this );
}
}
// Right-click
If (keyCode = 39)
{
If (this. selectIndex = 1)
{
SpecialText_validYear (this );
SpecialText_SelectMonth (this );
}
Else if (this. selectIndex = 2)
{
SpecialText_validMonth (this );
SpecialText_SelectDate (this );
}
Else if (this. selectIndex = 3)
{
SpecialText_validDate (this );
SpecialText_SelectYear (this );
}
}
// Press the upper key
If (keyCode = 38)
{
If (this. selectIndex = 1)
{
SpecialText_validYear (this );
SpecialText_YearAdd (this, true );
}
Else if (this. selectIndex = 2)
{
SpecialText_validMonth (this );
SpecialText_MonthAdd (this, true );
}
Else if (this. selectIndex = 3)
{
SpecialText_validDate (this );
SpecialText_DateAdd (this, true );
}
}
// Press the down key
If (keyCode = 40)
{
If (this. selectIndex = 1)
{
SpecialText_validYear (this );
SpecialText_YearAdd (this, false );
}
Else if (this. selectIndex = 2)
{
SpecialText_validMonth (this );
SpecialText_MonthAdd (this, false );
}
Else if (this. selectIndex = 3)
{
SpecialText_validDate (this );
SpecialText_DateAdd (this, false );
}
}
}
// If you press F5 or TAB, do not block it
Else if (event. keyCode = 116 | event. keyCode = 9)
Event. returnValue = true;
Else
{
Event. returnValue = false;
Event. keyCode = 0;
}
}
/** // * --------------------- Helper function -----------------------*/
// Get the default date
Function specialText_GetDate (middleChar)
{
Var oDate = new Date ();
Return oDate. getYear () + middleChar
+ (ODate. getMonth () <10? ('0' + oDate. getMonth (): oDate. getMonth () + middleChar
+ (ODate. getDate () <10? ('0' + oDate. getDate (): oDate. getDate ());
}
// Obtain the character pixel width
Function specialText_getCharWidth (charWidth, charNum)
{
Return charNum * charWidth;
}
// Obtain the maximum number of days of a month in a year
Function specialText_getMonthDates (strYear, strMonth)
{
Var intMonth = parseInt (strMonth, 10 );
If (intMonth = 1 | intMonth = 3 | intMonth = 5 | intMonth = 7
| IntMonth = 8 | intMonth = 10 | intMonth = 12)
Return 31;
// Process the month of 30 days
Else if (intMonth = 4 | intMonth = 6 | intMonth = 9 | intMonth = 11)
Return 30;
// Process July
Else
{
// Leap year
If (specialText_isLeapYear (strYear ))
Return 29;
// Year
Else
Return 28;
}
}
// Determine whether it is a leap year
Function specialText_isLeapYear (strYear)
{
Var intYear = parseInt (strYear, 10 );
If (intYear % 4 = 0 & intYear % 100! = 0) |
(IntYear % 100 = 0 & intYear % 400 = 0 ))
Return true;
Else
Return false;
}
/** // * ------------------------------ Put it in external JS. DateInputControl. js --------------------*/
Function init ()
{
RegDateControl ('date1 ');
}
</SCRIPT>
<Body onload = 'init () '>
<Input type = 'text' NAME = 'date1'>
</Body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More