CODEWITHSUNDEEP
javascriptjqueryhtml
Nutic
Nutic

Reputation: 1437

Disable some characters from input field

I have found some instructions similar, but none helps, all of them are either for special chars or for digits.

I need to make user type only 1 , 2 , 3, 4, 5, N, O, A, B, C . all other characters should be restricted.

Any way I can make my own selection of restricted/allowed chars for inputs ?

Upvotes: 33

Views: 79478

Answers (8)

Asad-ullah Khan
Asad-ullah Khan

Reputation: 1833

Here is a method that is more robust and prevents things like pasting in invalid characters:

let saved = ""
let input = document.getElementById("in")
input.addEventListener('keydown', () => {
  saved = input.value
})
input.addEventListener('input', () => {
  if (!/^[0-9]*$/.test(input.value)) {
    console.log("invalid input!!")
    input.value = saved
  }
})
<input id="in" type="text" leng/>

In this example I have prevented any non-numeric characters from being entered in, while still allowing pasting if the paste content would be allowable in the field

Upvotes: 0

allenhwkim
allenhwkim

Reputation: 27738

without JQuery

document.getElementById("foo").onkeypress = function(e) {
    var chr = String.fromCharCode(e.which);
    if ("12345NOABC".indexOf(chr) < 0)
        return false;
};

For one liners, from @mplungjan and @matthew-lock's comment

document.querySelector("#foo").onkeypress = function(e) {
    return "12345NOABC".indexOf(String.fromCharCode(e.which)) >= 0;
};

Upvotes: 31

Oliv&#233;r Raisz
Oliv&#233;r Raisz

Reputation: 482

Use the pattern attribute

It won't prevent the user to enter an unwanted character, but when they submit the form, there'll be a neat error message you can even customize. See this code below: 
<input pattern="[1-5A-CNO].*" title="You can only use the following characters: 1 , 2 , 3, 4, 5, N, O, A, B, C">

Source / sandbox to try it out: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern

Upvotes: 0

Pragnesh Chauhan
Pragnesh Chauhan

Reputation: 8476

Try this

$(function(){
  $('#txt').keypress(function(e){
    if(e.which == 97 || e.which == 98 || e.which == 99 || e.which == 110 || e.which == 111 || e.which == 65 || e.which == 66 || e.which == 67 || e.which == 78 || e.which == 79 || e.which == 49 || e.which == 50 || e.which == 51 || e.which == 52 || e.which == 53){
    } else {
      return false;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='txt' value='' onpaste="return false" />

Update 9th March 2018

$(function(){
  $('#txt').keypress(function(e){
    // allowed char: 1 , 2 , 3, 4, 5, N, O, A, B, C
    let allow_char = [97,98,99,110,111,65,66,67,78,79,49,50,51,52,53];
    if(allow_char.indexOf(e.which) !== -1 ){
      //do something
    }
    else{
      return false;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='txt' value='' onpaste="return false" />

Update 25th November 2020

let textarea = document.getElementById('txt');

textarea.addEventListener('keydown', (e) => {
  if(['1','2','3','4','5', 'N', 'O', 'A', 'B', 'C'].indexOf(e.key) !== -1){
    // do something
  } else {
    e.preventDefault();
  }
});

CodePen Demo

Upvotes: 24

BeK
BeK

Reputation: 181

In case someone is looking for pure js solution: You need to prevent the key for the onkeydown event just like this

HTML

<input type="text" name="" value="" onkeydown="preventSomeKeys(event)">

Javascript

function preventSomeKeys(event){
  var keyCode = event.keyCode
  if([97,98,99,110,111,65,66,67,78,79,49,50,51,52,53].includes(keyCode)){
     return false;
  }
}

Upvotes: 0

Armaniimus
Armaniimus

Reputation: 67

html

<input type="text" name="" value="" id="testr">
<script type="text/javascript" src="testkeydown.js"></script>

javascript

document.getElementById('testr').addEventListener('keydown', function(e) {
    const regex = RegExp('[0-9a-zA-Z]');

    if (!regex.test(e.key) && e.key != 'backspace') {
        e.preventDefault();
    }
});

In the code example above here you see a piece of code that disables most characters that are not between 0-9, a-z, A-Z in plain js.

If you like to research it more you can google mdn keydown event and look for the Morzilla developer network.

Upvotes: 2

andydavies
andydavies

Reputation: 3293

It's not 100% clear whether you want to restrict the form being submitted with invalid values, or literally prevent the user from even typing those values. The other answers deal with the latter, and I think that is what you meant, but there will be people arriving here (like me) who just want to prevent form submission.

In which case:

Use the pattern attribute on the input element:

<input pattern="[REGEX HERE]">

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

https://regex101.com/

Upvotes: 6

Abdul Malik
Abdul Malik

Reputation: 317

If you want to disable a few characters from input field you can do something like that:

<input type="text" onkeydown="return (event.keyCode!=86);"/>

86 is the code for V. Check code for other keys from the following link.

https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Upvotes: 2

Related Questions