How to prevent user to enter specific key using Javascript

Question

I have a text field and I want to allow only alphabet. So I write the below Javascript method to prevent other keys. Unfortunately my text field is allowing uparrow(^). Can any one tell me how to restrict uparrow(^) ?

function onlyAlphabet(evt) {
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;

    var keychar = String.fromCharCode(key);
    var keycheck = /[a-zA-z\s]/;

    if (!(key == 8 || key == 27 || key == 46 || key == 9 || key == 39)) // backspace delete  escape arrows
    {
        if (!keycheck.test(keychar)) {
            theEvent.returnValue = false;//for IE
            if (theEvent.preventDefault)
                theEvent.preventDefault();//Firefox
        }
    }
}

html code

<div class="form-group">
   <label class="form-text">Travels Name</label>
   <h:inputText value="#{bean.travelName}" maxlength="50" onkeypress="return onlyAlphabet(event)" />
</div>

http://stackoverflow.com/questions/29823591/html-input-do-not-allow-numbers — Ivan Bacher, Mar 29 '17 at 08:59

Mamun · Accepted Answer · 2017-03-29T16:40:02.210

You can achieve that in a more simpler way like the following:

function onlyAlphabet(inputVal) {
  var patt=/^[a-zA-Z]+$/;
  if(patt.test(inputVal)){
    document.getElementById('txtTravel').value = inputVal;
  }
  else{
    var txt = inputVal.slice(0, -1);
    document.getElementById('txtTravel').value = txt;
  }
  
}

<div class="form-group">
    <label class="form-text">Travels Name</label>
    <input id="txtTravel" type="text" maxlength="50"
     oninput="onlyAlphabet(value)" />
 </div>

score 1 · Answer 2 · answered Mar 29 '17 at 09:01

<!DOCTYPE html>
<html>
<head>
    <title></title>
 <meta charset="utf-8" />
    <script>
        function onlyAlphabet(evt) {
            var theEvent = evt || window.event;
            var key = theEvent.keyCode || theEvent.which;

            var keychar = String.fromCharCode(key);
            var keycheck = /[a-zA-z\s]/;

            if (!(key == 8 || key == 27 || key == 46 || key == 9 || key == 39 || key == 94)) // backspace delete  escape arrows
            {
               
                    if (!keycheck.test(keychar)) {
                        theEvent.returnValue = false;//for IE
                        if (theEvent.preventDefault)
                            theEvent.preventDefault();//Firefox
                    }
                
                
            }
            else if(key==94)
                theEvent.preventDefault();
        }
    </script>
</head>
<body>

   
    <input id="Text1" type="text"  onkeypress="return onlyAlphabet(event)"/>
</body>
</html>

Keycode for ^ is 94 .. Prevent it.. If you want to fix it yourself put alert(key) in the code, where you will get the code for the pressed key.

bluehipy · Answer 3 · 2017-03-29T09:20:04.717

The most elegant way (not supported in Safari) is to use the pattern attribute of the input element.

<input pattern="[A-Za-z\s\^]+" type="text" />

Read more here

For the `javascript` approach, codes for arrow keys are: { left_arrow : 37, up_arrow : 38, right_arrow : 39, down_arrow : 40 } In your if condition you have to eliminate 38 and 40.

Oh, you mean the ^ itself? :)))

It is enough to update your regular expression:

var keycheck = /[a-zA-z\s\^]/;

score 0 · Answer 4 · answered Mar 29 '17 at 09:13

0

Using jQuery, simple & elegant :

jQuery('#id').on('keypress', limitChars);

function limitChars(e){
     return event.charCode >= 97 && event.charCode <= 122;
}

answered Mar 29 '17 at 09:13

John Libes

363
3
11

Rafael Xavier · Answer 5 · 2018-05-30T14:53:27.653

0

You should try to block only the specific key you don't want. So keypress event get the pressed key before this character enter in your input. You also can use event.preventDefault() to block this specific key you don't want.

I'll show you a good example of how this could be done using jQuery.

$("input[name='yourinput']").keypress(function(event) {
    if ( event.keyCode == 94 ) {
        event.preventDefault();
    }
});

edited May 30 '18 at 14:53

answered May 30 '18 at 10:48

Rafael Xavier

956
13
13

1

Please provide an explanation as well. Code-only answers are discouraged. – O.O.Balance May 30 '18 at 11:08

score 0 · Answer 6 · answered Jun 08 '21 at 21:07

0

This also works

<div class="form-group">
   <label class="form-text">Travels Name</label>
   <h:inputText value="#{bean.travelName}" maxlength="50" onkeypress="/[a-zA-Z]/.test(event.key) || event.preventDefault()" />
</div>

answered Jun 08 '21 at 21:07

eOssa

44
5

How to prevent user to enter specific key using Javascript

6 Answers6