-5

I have searched through a lot of code on Google but all useless when it comes to blocking the typing of % sign when pressing Shift + 5 key-combination in any textfield.

Is there no code that can actually do that in the Chrome and IE browsers, almost all latest versions effectively ?

I wanna do this for Zipcode validation wherein the requirement is that, User shouldn't be allowed to type anything but numbers and be able to edit and remove numbers only.

I tried below code and many keyCodes to block this but it still types % sign when I type Shift + 5 in the relevant textfield:

if ( key < 48 || key > 57 || event.charCode == 37 || event.which == 37 || event.which == 16 || event.which == 163) {
        event.preventDefault();
        return false;
    }

Can anyone help ?

Vicky Dev
  • 1,893
  • 2
  • 27
  • 62
  • 4
    Sounds like a XY problem. – Nick Dec 19 '17 at 22:13
  • What do you mean ? And why was the question I guess must have been faced by many developers, has been downvoted ? – Vicky Dev Dec 19 '17 at 22:14
  • 1
    XY problem: https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem – Robert Wade Dec 19 '17 at 22:16
  • Ok, sounds like question formation is wrong, I need to ask in different manner – Vicky Dev Dec 19 '17 at 22:18
  • I have edited my question to depict the actual problem rather than attempted solution, I just posted the code for more information, hope this is fair enough. – Vicky Dev Dec 19 '17 at 22:21
  • 2
    What is your actual intention here? Just to prevent certain characters from being entered in the field? Or restrict the field to a certain set of characters? Alphanumeric perhaps? If so there are more elegant ways to do this with JS and regular expressions than looking for character codes. – Robert Wade Dec 19 '17 at 22:24
  • Yeah, the *why* here is very important. Why do you want to block % characters? – ceejayoz Dec 19 '17 at 22:25
  • Ok just so you have asked it, let me explain: Actually I have been successfull in blocking all the keys except the numbers and backspace, left, right arrows & del keys in the textfield in which I only wanna allow numbers, but that works 100% only in firefox, in IE and Chrome I wanna have that same effect as in firefox, hope this makes it clear, what I wanna do. I wanna do this for US-zipcode (5 digits only) validation purposes – Vicky Dev Dec 19 '17 at 22:26
  • See https://stackoverflow.com/questions/13952686/how-to-make-html-input-tag-only-accept-numerical-values, https://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery, or look into "input masking". – ceejayoz Dec 19 '17 at 22:29
  • I also wanna allow delete and backspace keys to be working along with numbers, as I have already mentioned in my question, best not to ignore that. – Vicky Dev Dec 19 '17 at 22:32
  • 1
    @VickyDev Please look at the variety of solutions I've shown in my answer including the two new ones I've added since you clarified that you are looking for zip code validation. – Scott Marcus Dec 19 '17 at 22:38
  • Just allow me to **delete the question** rather than showing your negativity by downvoting the questrion again and again meaninglessly....................................... Atleast it will get my lost reputation back for just an honest mistake I made which many people make..................................................... – Vicky Dev Dec 20 '17 at 00:08

1 Answers1

2

You have to test for the Boolean result of shiftKey as well as the keyCode and you need to do it on the keydown event, not keypress because only printable characters trigger keypress and SHIFT isn't a printable character.

var txt = document.querySelector("input");

txt.addEventListener("keydown", function(evt){
  if(evt.shiftKey && evt.keyCode === 53){
    evt.preventDefault();
  }
});
<input type="text">

And, as mentioned below in the comments, this won't completely prevent the % sign from being able to be entered, so you may want to have something like this:

var txt = document.querySelector("input");

// Prevent % from staying in value
txt.addEventListener("input", function(evt){
  this.value = this.value.replace(/%+/g, "");
});
<input type="text">

UPDATE:

You've stated: I wanna do this for US-zip code (5 digits only) validation purposes, so why not just use either a regular expression on a normal text field or the pattern attribute on a text field:

var txt1 = document.getElementById("t1");


// Prevent % from staying in value
txt1.addEventListener("change", function(evt){
  this.value = this.value.match(/^\d{5}$/) ? this.value : "invalid zip code";
});
:invalid { background-color:rgba(255, 0, 0, .4); }
<input type="text" id="t1">
<input type="text" id="t2" pattern="^\d{5}$">
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • 4
    this is what you asked for - but consider it does not prevent from typing a percent sign - you can have alternative keyboard layouts or insert the percent sign with ascii code: press-and-hold the left [Alt] key, press (and release) [3] and then [7] on numpad, and then release the [Alt] key. – Christoph Bimminger Dec 19 '17 at 22:19
  • @ChristophBimminger See updated answer to address that. – Scott Marcus Dec 19 '17 at 22:27
  • Also nothing in this thread prevents someone from submitting anything they want directly to the back-end service. – Sammitch Dec 20 '17 at 00:05
  • @Sammitch That’s what server-side validation is for and has nothing to do with the question. – Scott Marcus Dec 20 '17 at 00:15