CODEWITHSUNDEEP
javascripthtmlcssinput
Rono
Rono

Reputation: 3371

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.

Upvotes: 27

Views: 42169

Answers (8)

anirudh goyal
anirudh goyal

Reputation: 5

<input type = "number" inputmode = "numeric">

Upvotes: -3

oxq
oxq

Reputation: 364

If you are using Angular you can create a custom directive that does the job:

ng generate directive DisableArrowUpDownWheel

This is the code for the directive:

import { Directive, ElementRef } from '@angular/core';   
@Directive({
  selector: '[disableArrowUpDownWheel]',
})
export class DisableArrowUpDownWheelDirective {
  constructor(private el: ElementRef) {
    let input: HTMLInputElement = el.nativeElement;
    // disable the scroll wheel
    input.onwheel = () => {
      return false;
    };
    // disable the up/down arrow keys
    input.onkeydown = (event: KeyboardEvent) => {
      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') return false;
      else return true;
    };
  }
}

See https://angular.io/guide/attribute-directives for more info about custom directives.

Upvotes: 0

mahdi
mahdi

Reputation: 77

as you can see in this article you can use this CSS depends on browser that you used

    /* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
<input type="number">

Upvotes: 1

anjaneyulubatta505
anjaneyulubatta505

Reputation: 11695

You can use the below code (JSFiddle):

$(document).ready(function() {
  $("input[type=number]").on("focus", function() {
    $(this).on("keydown", function(event) {
      if (event.keyCode === 38 || event.keyCode === 40) {
        event.preventDefault();
      }
    });
  });
});
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" min="1.01" max="1000" id="num" />

Upvotes: 6

Naman Mittal
Naman Mittal

Reputation: 101

If you are using Angular, try:

<input type="number"onwheel="return false;" (keydown.arrowup)="(false) (keydown.arrowdown)="(false)"/>

Upvotes: 6

M0nst3R
M0nst3R

Reputation: 5293

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.

Upvotes: 39

mikestreety
mikestreety

Reputation: 841

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!

Upvotes: 2

Andr&#233;
Andr&#233;

Reputation: 12737

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

Upvotes: -3

Related Questions