Prevent arrow keys from changing values in a number input

问题

I have an input control on a webpage similar to this:

<input type="number" name="value" />

If this control has focus and I hit either the up or down arrow keys, then the value in the textbox increments or decrements (except in IE). I would like to disable this feature, preferably using CSS. I already have the spinner buttons removed using CSS. I realize I could use JavaScript to capture the keydown event, but I want to allow the arrow keys to continue to scroll the page up or down.

回答1:

There is no way of doing the behavior you are describing purely with CSS because CSS handles display and we are talking about behavior and keyboard events here.

I would suggest to add an event listener to your input which will prevent the arrow keys from having an effect on it witout actually preventing the page scroll with the input is not in focus:

document.getElementById('yourInputID').addEventListener('keydown', function(e) {
    if (e.which === 38 || e.which === 40) {
        e.preventDefault();
    }
});

If by any chance you want the arrow keys to scroll the page event if the input is in focus, I would suggest using JQuery which will allow you to write less code and it will support all browsers.

回答2:

You can use the below code

HTML

<input type="number" min="1.01" max="1000" id="num"/>

CSS

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

JavaScript:

$(document).ready(function() {
$("input[type=number]").on("focus", function() {
    $(this).on("keydown", function(event) {
        if (event.keyCode === 38 || event.keyCode === 40) {
            event.preventDefault();
        }
     });
   });
});

You can find the working example here: http://jsfiddle.net/649d66bb/

回答3:

I know this isn't the answer you want to hear but is this something you should really be doing?

Just because, in this instance, it does not suit you, you appear to be going against expected behaviour from the browser and user to try and manipulate something into doing something it doesn't.

As a user, tabbing into a field and being able to use the up and down arrows to alter the value is the expected behaviour. Such as clicking a logo takes you home, or pressing Cmd/Ctrl + W closes the window. If anything interferes with this, you are ultimately going to alienate the user and they are going to lose faith in your interface.

Even with a standard type="text" box, the up and down arrows don't scroll the page, this functionality seems to go against everything that is standard.

Saying that you've given no context for this issue and it could be for an internal tool or private use, in which case, JS looks like the way to go!

回答4:

Oh, I was just able to do it with a keydown listener and the following filter:

const invalid = ['e', ',', '.', 'ArrowUp', 'ArrowDown'];
if (invalid.find(e => $event.key === e)) {
  $event.preventDefault();
}

In my case, I also want to forbid the chars: e , .

来源：https://stackoverflow.com/questions/24192333/prevent-arrow-keys-from-changing-values-in-a-number-input

标签

html

input