Disable/enable keys

#1

We would like to learn how to disable/enable keys for within a text box, with coding as simple as possible.

For example in a text box that provides a decimal measurement we would only want numbers 0-9 & period (.) to be enabled & all other keys disabled.

For simplicity is it possible to disable all keys then enable (0-9 .) rather than individually disable all the others?

Another example would be to enable only a-z lower case.

Or A-Z upper case.

Another idea we have is to disable these characters < > { } from all text boxes & text areas, and also record the users ID, together with a warning message, of whoever attempts to insert those characters.

We are familiar with the Javascript Char Codes (Key Codes) but wonder if the numbers are consistent.

And have read that some browsers use different numbers. Is there any truth in that?

If different browsers use different numbers then it would be appropriate for the website to enable the browsers that are consistent with Javascript numbers.

Another concern is, as Javascript is client side coding, can it be hacked to circumvent any disabled keys?

I read this in an article - There is NO security in html forms. The form exists in the user’s browser, and by definition the user has complete control over what’s in their browser. Im not sure if that considered the disabling of keys.

@RandellDawson you appear to know a little Javascript. Maybe you can help. Or has anybody else any answers or ideas?

#2

you can use html to determine the type of a text field, if you write <input type="number"> only numbers can be written in there

#3

HTML input elements allow you to do this, you don’t need JS to prevent input of certain characters. They accept a pattern attribute, which will be a regex of what the input accepts.

You don’t disable keys. If you use JS for this instead of just HTML (which is fine, it allows more granular control, it’s just much more complex), you would listen for keyup events (the user lifting their finger off a key). Then you would check what the key is. If it’s allowed, then allow the letter to print to the screen, otherwise don’t bother printing it. You don’t disable anything, you just ignore.

Sure, just turn off the Javascript. Or go in and change the allowed values or whatever.

What you’re describing isn’t security, it’s just UI – the user only needs a subset of characters, so only print those characters on screen when they type. You should just be helping them avoid errors. Any real security should happen on a server somewhere that they have zero access to. You cannot make something secure when the user of it has all the code for it + almost complete control over how it works.

Not quite sure what you mean by that.

1 Like
#4

Thanks @ieahleen but what about a-z & A-Z & maybe a few other permitted characters? Is there a site I can look up?

#5

input with patterns like Dan says above, that will you specify any pattern you want for the input

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern

#6

If you do use JS, then you don’t need character codes, you just specify what the value of the key is that you’re targeting. See:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code

If you’re talking about different keyboard layouts when you say “different numbers”, then the above is to deal with that – if you specify you’re tageting the letter “q”, then it’ll register a “q” regardless of how the keyboard is set up.