Solved

# how can i make a field accepts only numbers and no text?

Posted on 2004-11-18
446 Views
how can i make a field accepts only numbers and no text so that when the user enters text into the field he gets an error message that he should enter only number?
0
Question by:Melfeky

LVL 31

Accepted Solution

0

LVL 63

Assisted Solution

Like this:

<input type=text name="myField" onKeyUp="fV=this.value;if(fV.match(/\D/))this.value=fV.replace(/\D/g,'');">

0

LVL 31

Expert Comment

Zvonko, not much use for number with decimal points
0

LVL 31

Expert Comment

try this for testing off the key up

<input type="text" name="myField" onKeyUp="if (isNaN(this.value) && !/^[+-]\$/.test(this.value)) {this.value=this.value.replace(/.\$/,'')}">
0

LVL 33

Expert Comment

here's my version:

<INPUT type="text" name="numeric"  onkeyup='this.onchange();' onchange='this.value=this.value.replace(/[^\d]*/gi,"");' />

also handles cut-n-paste into the field
0

Author Comment

I want to use this but also alert the user that this field accepts only numbers.
<input type="text" name="myField" onKeyUp="if (isNaN(this.value) && !/^[+-]\$/.test(this.value)) {this.value=this.value.replace(/.\$/,'')}">
0

LVL 33

Assisted Solution

put a title in it:

<INPUT type="text" name="numeric"  onkeyup='this.onchange();' onchange='this.value=this.value.replace(/[^\d]*/gi,"");' title="This field is numeric only." />
0

LVL 31

Expert Comment

<input type="text" name="myField" onKeyUp="if (isNaN(this.value) && !/^[+-]\$/.test(this.value)) {alert('numbers only');this.value=this.value.replace(/.\$/,'')}">
0

Author Comment

knightEknight , I used ur version but i got no error message when the user enters text  ,it is only deleted.

GwynforWeb :
when i used ur version i got the error message but the when i enter text only the last letter is removed while the other letters are left there .
0

LVL 23

Assisted Solution

<input type=text name="t1" onkeyup="this.value=this.value.replace(/[^\d]+/,'')">
0

LVL 23

Expert Comment

Sorry, mine is almost same as KnightKnight.
0

LVL 31

Expert Comment

The code I have written fires off the on keyup, the only way you can get multiple letters is by pasting or typing lightenly fast (ie next key down before prveious key up). The onpaste can be dealt with as well.

If you use  knightEknight's version then it works for integers and will change 2.34 and 2a3dd4  to 234 when using paste, which may or may not be what you want. An alert is easily added like so.

<INPUT type="text" name="numeric"  onkeyup='this.onchange();' onchange='alert("numbers only");this.value=this.value.replace(/[^\d]*/gi,"");' />

The problem is simplfied if only +ve integers are  allowed  , could you clarify your requirements eg

eg for +ve integers

<script>
function check(obj){
if (/\D/.test(obj.value)){
if (/^\d*\D\$/.test(obj.value))
obj.value=obj.value.replace(/\D\$/i,"")
else
obj.value=''
}

}
</script>

<input type="text" name="num1"  onkeyup='this.onchange();' onchange='check(this)'>
0

LVL 33

Expert Comment

>> knightEknight,  I used ur version but i got no error message when the user enters text  ,it is only deleted.
yes, by design ... I used the title to show a tooltip message about the field.  This is far less disruptive than an alert box.
0

Author Comment

>>I used the title to show a tooltip message about the field.
I don't see a tooltip when i mouseover the field and when i enter text into the field.
Have u tested this before?
Thanks
0

Author Comment

Thank u all guys
0

## Featured Post

### Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…