1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

input type=numberの上下キーでの増減を無効にする

Last updated at Posted at 2021-02-23

 input type=numberの値が上下キーで増減するのを無効にする必要があったので、HTML属性で有効無効を切り替えられるのかと思ったけれど、無効にはできないようなので、JQueryで対処。
 押したキーを無効化するだけですが、検索して調べる人もいると思うので書いておきます。

 画面上のすべてのinput type=numberに対して効くので、一部のinputだけに適応させたい場合はセレクタでidやclassを指定してあげてください。

$(function ()
{
	$('input[type=number]').keydown(function (event)
	{
		switch (event.key)
		{
			case 'ArrowUp':
			case 'ArrowDown':
				return false;
		}
	});
});

 「矢印ボタンを出さない」と「マウススクロールでの増減無効化」は実装例がたくさんあるのだけれど、上下キー無効はあまり必要ないのかな。
 間違ってカーソルキーを押しちゃった時にいつのまにか値が変わっていたら嫌なので需要はあると思うんですけどね。金額入力とか。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?