how to avoid typing letters in html?

Question

How can we avoid typing a letters or numbers in html tags? Do we still need to create a block of codes in PHP just to avoid it? or we can disabled it in through html just like this:

    <input type="text" />

instead of doing it can we make it like this?

    <input type="number" />

so that letters will not appear if you press any letters.

<body>
<table>
<tr>
    <td>this is for text</td><td><input type="text" size="5" maxlength="5"></td>
    <td>this for numbers</td><td><input type="number" size="5" maxlength="5"></td>
</tr>
</table>
</body>

any idea? where should i put the javaScript?

Yes, but you will always need to re-verify the data on the server as markup guarantees nothing. — Alex K., Jun 13 '14 at 12:34
what i mean is, when you press letters in keyboard it will not show up. in my example, the user can type any character. — melly, Jun 13 '14 at 12:38
@user3737597 that depends on which browser you are using. If you want it to act the same accross browsers, you need to use some javascript (and still validate it serverside) — Steve, Jun 13 '14 at 12:39
is there any way to disable typing letters? can you give me an example? — melly, Jun 13 '14 at 12:39
@user3737597 see the answers by mooseman (if using jquery) or TJ if not — Steve, Jun 13 '14 at 12:44

score 3 · Accepted Answer · 2014-06-13T17:56:55.503

3

You could use this validating for numbers on SUBMIT:

pattern="[0-9]{10}"

{10} here allows a maximum of 10 numbers

Take a look at the Regex cheat sheet for more info:

link

OR here is the way via javascript which validates without SUBMIT:

<input type='text' onkeypress='validate(event)' />

  function validate(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

EDIT for user (Check for numbers on pressing enter):

<input type="text" id="txtTextBox" />

$('#txtTextBox').keypress(function(event){
    var regex = /[0-9]|\./;
    var text = $("input[type=text]").val();
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13' && !(regex.test(text))) {
     alert('You pressed a "enter" key in textbox'); 
}
});

Jsfiddle:

link

edited Jun 13 '14 at 17:56

answered Jun 13 '14 at 12:38

got it! but how can i add ENTER key to that [0-9] value? – melly Jun 13 '14 at 13:19
What do you mean by enter key? What exactly do you want to do? – Jun 13 '14 at 15:21
what i want is while i am typing numbers to the text field and press enter it will automatically sends the number i typed. i just want to enable the "ENTER KEY", because in this example it only allows numbers to be pressed not the "ENTER KEY" – melly Jun 13 '14 at 16:19
here is your jsfiddle: http://jsfiddle.net/RC78z/105/ – Jun 13 '14 at 17:54
Please give it a upvote if it is helpful to you – Jun 13 '14 at 19:33

score 1 · Answer 2 · answered Jun 13 '14 at 12:38

1

You can bind a key press event handler and check the key code using client side script. Returning false will prevent the input. following is an example in javascript

 element.onkeypress(function(e){
   var keycode = e.which;
         /* 48-57: 0 -9
            8:backspace */
   if((keycode >= 48 && keycode <= 57) || keycode == 8 )
      return true;
   return false;
});

answered Jun 13 '14 at 12:38

T J

42,762
13
83
138

i have this code – melly Jun 13 '14 at 12:46
@user3737597 sorry, i didn't get you…? – T J Jun 13 '14 at 12:47
sorry i press enter accidentally... where do i put your code @T J? – melly Jun 13 '14 at 12:52
inside a – T J Jun 13 '14 at 12:57

Mooseman · Answer 3 · 2014-06-13T13:00:40.097

1

<input type="number" /> is perfectly valid. However, it will still allow the user to type letters. Here's a solution with jQuery:

$("#myInput").keydown(function(e){
    if(((e.keyCode < 48) || (e.keyCode > 57))&& e.keyCode != 8){
        e.preventDefault();
    }
});

Fiddle: http://jsfiddle.net/yC7un/1/

If you're not using jQuery, use the following "vanilla" JS:

document.getElementById("myInput").onkeydown=function(e){
    if(((e.keyCode < 48) || (e.keyCode > 57))&& e.keyCode != 8){
        return false;
    } return true;
};

Fiddle: http://jsfiddle.net/yC7un/2/

edited Jun 13 '14 at 13:00

answered Jun 13 '14 at 12:39

Mooseman

18,763
14
70
93

sorry but i am not so familiar with jQuery can we make it in php? – melly Jun 13 '14 at 12:53
PHP is server-side. PHP can **not** prevent a user from typing letters. – Mooseman Jun 13 '14 at 12:54
@user3737597 I just updated my answer with a non-jQuery solution. – Mooseman Jun 13 '14 at 13:01

score 0 · Answer 4 · answered Jun 13 '14 at 12:36

0

Some browsers will still allow letters as input, but will not validate when the form submits. As colburton said, your suggestion is the most correct way.

You COULD make a javascript onkeydown-function to check the user's input and overwrite it.

answered Jun 13 '14 at 12:36

Niek Vandael

394
1
3
15

score 0 · Answer 5 · answered Jun 13 '14 at 12:37

0

Use patterns.

For letters:

<input type="text" pattern="[A-Za-z]" />

for numbers

<input type="text" pattern="[0-9]" />

Only work in HTML5 and input types "text, search, url, tel, email, and password", for older browsers you should go with JS/jQuery.

answered Jun 13 '14 at 12:37

sailens

1,594
1
17
34

You can still type anything you want there. It just doesn't validate. – Bart Jun 13 '14 at 12:38
I forgot it validates on submit, your best option is JS then – sailens Jun 13 '14 at 12:42

how to avoid typing letters in html?

5 Answers5