The text box limits the input type & lt; input & gt;. The input box

Source: Internet
Author: User

The text box limits the input box of the input type <input>. The input box

After a project was developed recently, the tester tested the bug. Then I changed the bug one by one based on the bugs they tested. Then I encountered a problem. The text box was used for searching. However, for example, this text box is used to search for the age range. when you enter a condition, you cannot enter a non-numeric character. In fact, we can use regular expressions to solve such problems. In our development project, the corresponding regular expressions have been verified, but this framework is not so easy to do, this method may not be the best, but it can solve the current problem.

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

2. Only numbers can be entered and pasted
<Input onkeyup = "this. value = this. value. replace (/\ D/g, '')" onafterpaste = "this. value = this. value. replace (/\ D/g, '')"/> <br/>

3. Digital script
<Input onkeyup = "if (/\ D /. test (this. value) {alert ('only numbers allowed '); this. value = '';}"> <br/>

4. Only numbers and English letters can be entered.
<Input onkeyup = "value = value. replace (/[\ W]/g, '')" onbeforepaste = "clipboardData. setData ('text', clipboardData. getData ('text '). replace (/[^ \ d]/g, '')"> <br/>

5. Chinese characters cannot be entered.
<Input style = "ime-mode: disabled"> the input method is not converted, but can be pasted. <br/>

6. Enter a number and a decimal point
<Input onkeyup = "value = value. replace (/[^ \ d {1 ,}\. \ d {1 ,}| \ d {1 ,}]/g, '')"/> <br/>

7. Only numbers and "-" are allowed. For example, you can use
<Input onkeyup = "value = value. replace (/[^ \ w & =] | _/ig, '')" onblur = "value = value. replace (/[^ \ w &-] | _/ig, '')"/>

JS controls input character limits

ENTER to move the cursor to the next input box

<Input onkeydown = "if (event. keyCode = 13) event. keyCode = 9"> only Chinese
<Input onkeyup = "value = value. replace (/[-~] /G, '')" onkeydown = "if (event. keyCode = 13) event. keyCode = 9 "> shielded input Method <input style =" ime-mode: disabled "onkeydown =" if (event. keyCode = 13) event. keyCode = 9 "> only English and numbers can be entered.
<Input onkeyup = "value = value. replace (/[/W]/g, '')" onbeforepaste = "clipboardData. setData ('text', clipboardData. getData ('text '). replace (/[^/d]/g, '')" onkeydown = "if (event. keyCode = 13) event. keyCode = 9 "> only numbers are allowed
<Input onkeyup = "value = value. replace (/[^/d]/g, '')" onbeforepaste = "clipboardData. setData ('text', clipboardData. getData ('text '). replace (/[^/d]/g, '')">


Display only, cannot modify

<Input readonly value = "displayed only, cannot be modified"> only numbers can be entered to determine the key value.
<Script language = javascript>
Function onlyNum ()
{
If (! (Event. keyCode> = 48 & event. keyCode <= 57) | (event. keyCode> = 96 & event. keyCode <= 105) | (event. keyCode = 8 )))
Event. returnValue = false;
}
</Script>
<Input onkeydown = "onlyNum ();">


1. Only numeric code can be entered in the text box (decimal point cannot be entered)
<Input onkeyup = "this. value = this. value. replace (// D/g, '')" onafterpaste = "this. value = this. value. replace (// D/g, '')">

2. Only numbers can be entered, and decimal points can be entered.
<Input onkeyup = "if (isNaN (value) execCommand ('undo ')" onafterpaste = "if (isNaN (value) execCommand ('undo')">
<Input name = txt1 onchange = "if (// D /. test (this. value) {alert ('only numbers allowed '); this. value = '';}">

3. Number and decimal point method 2

<Input type = text t_value = "" o_value = "" onkeypress = "if (! This. value. match (/^ [/+/-]? /D *? /.? /D *? $/) This. value = this. t_value; else this. t_value = this. value; if (this. value. match (/^ (? : [/+/-]? /D + (? : //./D + )?)? $/) This. o_value = this. value "onkeyup =" if (! This. value. match (/^ [/+/-]? /D *? /.? /D *? $/) This. value = this. t_value; else this. t_value = this. value; if (this. value. match (/^ (? : [/+/-]? /D + (? : //./D + )?)? $/) This. o_value = this. value "onblur =" if (! This. value. match (/^ (? : [/+/-]? /D + (? : //./D + )? |/./D *?)? $/) This. value = this. o_value; else {if (this. value. match (/^ /. /d + $/) this. value = 0 + this. value; if (this. value. match (/^ /. $/) this. value = 0; this. o_value = this. value} ">


4. Only letters and Chinese characters can be entered
<Input onkeyup = "value = value. replace (/[/d]/g, '')" onbeforepaste = "clipboardData. setData ('text', clipboardData. getData ('text '). replace (/[/d]/g, '')" maxlength = 10 name = "Numbers">

5. Only English letters and numbers are allowed. Chinese characters are not allowed.
<Input onkeyup = "value = value. replace (/[^/w/. //]/ig,'') ">

6. Only numbers and English letters can be entered.
<Font color = "Red"> chun </font>
<Input onKeyUp = "value = value. replace (/[^/d | chun]/g,'') ">
7. A maximum of two digits (numbers and Chinese characters) can be entered after the decimal point. Letters and operator numbers cannot be entered: <input onKeyPress = "if (event. keyCode <48 | event. keyCode> 57) & event. keyCode! = 46 | //. /d $ /. test (value) event. returnValue = false "> 8. only two digits (numbers, letters, and Chinese characters) can be entered after the decimal point. You can enter the operator number:
<Input onkeyup = "this. value = this. value. replace (/^ (/-) * (/d + )/. (/d ). * $/, '$1 $2. $ 3') ">
It can only be a number, a decimal point, or a plus or minus sign.
9. Only numbers, decimal points, and negative numbers can be entered.

<Input name = "input" type = "text" onkeyup = "JHshNumberText (this)" id = "title">

<Script language = "javascript" type = "text/javascript"> function JHshNumberText ()
{
Var fa = "";
If (a. value. substring (0, 1) = "-")
Fa = "-";
Var str = (. value. replace (/[^ 0-9.] /g ,'')). replace (/[.] [0-9] * [.] /,'. ');
If (str. substring (0, 1) = ".")
Str = "0" + str;
A. value = fa + str;
}
</Script>


1. When the cancel button is pressed, add the value hideFocus or HideFocus = true to the input.
<Input type = "submit" value = "submit" hidefocus = "true"/>

2. Read-only text box content, add the attribute value readonly in input
<Input type = "text" readonly/>

3. Prevent TEXT files from being cleared (style content can be referenced as a class)
<Input type = "text" style = "behavior: url (# default # savehistory);"/>

4. Press ENTER to move the cursor to the next input box.
<Input type = "text" onkeydown = "if (event. keyCode = 13) event. keyCode = 9"/>

5. It can only be Chinese (with flashing)
<Input type = "text" onkeyup = "value = value. replace (/[-~] /G, '')" onkeydown = "if (event. keyCode = 13) event. keyCode = 9"/>

6. Only numbers are allowed (with flashing)
<Input type = "text" onkeyup = "value = value. replace (/[^/d]/g, '')" onbeforepaste = "clipboardData. setData ('text', clipboardData. getData ('text '). replace (/[^/d]/g, '')"/>

7. Only numbers are allowed (no flashing)
<Input type = "text" style = "ime-mode: disabled" onkeydown = "if (event. keyCode = 13) event. keyCode = 9 "onkeypress =" if (event. keyCode <48 | event. keyCode> 57) event. returnValue = false "/>

8. Only English and numbers can be entered (with flashing)
<Input type = "text" onkeyup = "value = value. replace (/[/W]/g, '')" onbeforepaste = "clipboardData. setData ('text', clipboardData. getData ('text '). replace (/[^/d]/g, '')"/>

9. shielded Input Method
<Input type = "text" name = "url" style = "ime-mode: disabled" onkeydown = "if (event. keyCode = 13) event. keyCode = 9 "/>

10. You can only enter numbers, decimal points, minus (-) characters (no flashing)
<Input onkeypress = "if (event. keyCode! = 46 & event. keyCode! = 45 & (event. keyCode <48 | event. keyCode> 57) event. returnValue = false "/>

11. Only two decimal places can be entered, and three decimal places (with flashing)
<Input type = "text" maxlength = "9" onkeyup = "if (value. match (/^/d {3} $/) value = value. replace (value, parseInt (value/10); value = value. replace (//. /d */. /g ,'. ') "onkeypress =" if (event. keyCode <48 | event. keyCode> 57) & event. keyCode! = 46 & event. keyCode! = 45 | value. match (/^/d {3 }$/) | //. /d {3} $ /. test (value) {event. returnValue = false} "/>

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.