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>

stackoverflow.com/questions/29823591/…

Ivan Bacher
– Ivan Bacher

2017-03-29 08:59:01 +00:00
Commented Mar 29, 2017 at 8:59 — Ivan Bacher
– Ivan Bacher, Commented Mar 29, 2017 at 8:59
Why don't use regular expression instead?

Mamun
– Mamun

2017-03-29 09:01:17 +00:00
Commented Mar 29, 2017 at 9:01 — Mamun
– Mamun, Commented Mar 29, 2017 at 9:01

Mamun · Accepted Answer · 2017-03-29 16:40:02Z

4

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>

edited Mar 29, 2017 at 16:40

answered Mar 29, 2017 at 9:27

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ratheesh · Accepted Answer · 2017-03-29 09:01:49Z

<!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.

eOssa · Accepted Answer · 2021-06-08 21:07:58Z

1

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 8, 2021 at 21:07

eOssa

645 bronze badges

Comments

John Libes · Accepted Answer · 2017-03-29 09:13:26Z

0

Using jQuery, simple & elegant :

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

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

answered Mar 29, 2017 at 9:13

John Libes

3913 silver badges12 bronze badges

Comments

bluehipy · Accepted Answer · 2017-03-29 09:20:04Z

0

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" />

Comments

Rafael Xavier · Accepted Answer · 2018-05-30 14:53:27Z

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, 2018 at 14:53

answered May 30, 2018 at 10:48

Rafael Xavier

1,09315 silver badges16 bronze badges

1 Comment

O.O.Balance Over a year ago

Please provide an explanation as well. Code-only answers are discouraged.

Collectives™ on Stack Overflow

How to prevent user to enter specific key using Javascript

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related