矢印ボタンで
数値を増減する
フォーム
PCとスマホ両方で、
フォーム内入力ボックスの数値を
矢印ボタンで自在に増減します

image: 矢印ボタンで数値を増減するフォーム

スマホもPCも使える、ボタンを押すと数値を増減させるテキストボックス

 | 2021/08/28

押し続けると増減のスピードが
どんどん早くなります。

フォーム用の数値増減ボタンです。
※スピナーと言うそうです。
ボタンを押し続けると数値が増減し続けます。
増減のスピードもどんどん速くなります。
まずはサンプルをどうぞ。
実際にボタンを押してみてください。

  • 数値入力TEST
    入力された数値は

特徴としては

・スマホでもPCでも対応。
現状のPCやスマホでの問題点を全て解決。
この後のコラムでその問題点を解説しています。

・ボタンをinput要素と切り離しているため
ダブルタップ時の選択状態が起きない。

・連打しなくても押し続けると数値が連続して増減する。
さらにスピードがどんどん早くなり、イライラ解消。
もちろんテキストボックスで直接数値を入力することも可能です。

これまでのHTML5や
スマホでの問題など

既存フォームのHTML5の仕様上の問題は
ボタンが小さすぎること

HTML5ではinput要素のtype属性を”number”に指定すると自動で増減ボタンになりますが、PCでは小さすぎたり、スマホ(iPhone)では対応していません。

スマホでの仕様上の問題点は
フォームの拡大など

また、フォーム入力時のスマホ特有の問題もあります。
1.フォームが入力状態になると拡大される。
2.数値の増減のためボタンを連打するとダブルクリックと判定され拡大される。
下記のような選択状態になる問題もます。

https://studio-happyvalley.com/wp/wp-content/uploads/fig_01.png

今回開発したプログラムは上記の問題を全て解決しています。

jQueryプラグインは
どうかな

jQueryプラグインではどんなスピナーが公開されているのか調べてみました。
が、jQueryの場合もPCではHTML5とほぼ変わりません。
スマホではHTML5よりましで、ボタンが表示されますが非常に小さいです。
またボタン押し続けても一つしか増減しません。

他にも細かい問題はいろいろあるけど、一番の問題はjQuery3系に対応していないってことですね。
はっきり言って前世紀の遺物です。

一応、jQueryで実装した案件もありますので下記でご覧ください。

数値増減ボタンをjQueryで実装した案件:https://test.studio-happyvalley.com/otoriba/simulator/

上記を仕事の案件で実装したときにひどい目にあい、プラグインなんか使わなくったて、もっと簡単で便利にできるだろ!とフルスクラッチで開発したのが本案件です。
下記にサンプルページを記載。

本コンテンツの数値増減ボタン:https://labo.studio-happyvalley.com/spinner/

実装サンプル:https://test.studio-happyvalley.com/kyokuhou/simulator/

『矢印ボタンで数値を増減するフォーム』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら