inputタグで実現したいことがある

Question

<input type="number">

というコードで数字のカウントアップやカウントダウンが出来ると思いますが、右側の上下の矢印はそのままで、テキストが入る状態を実現したいです。

自分で取り組んだこと
・MDNで該当すると思われるtype属性を試した
・youtube動画でformタグの動画を探して実践しようとした

少し分かりづらい質問になりますが、ご回答頂けると幸いです。
よろしくお願いいたします。

Answer 1

上下ボタンのことを「ステッパー」や「スピンボタン」と呼びます。

スピンボタンが自動で付くのは <input type=number> だけです。Google Chrome は <input type=number> では数字以外の文字は入力不可で入力許可する方法はありません。

よって、HTMLだけではご希望の動作を実現するのは不可能です。
<input type=text> を使って、JavaScriptなどを使ってスピンボタン相当のものを自分で追加実装しましょう。

Comments

[kine97]

そうなんですね。javascriptも検索してやってみます。ご回答頂きありがとうございました。

Answer 2

右側の上下の矢印はそのままで、テキストが入る状態を実現したいです。

そんなあなたのために、 https://developer.mozilla.org/ja/docs/Web/HTML/Element/select があるのではないでしょうか。スピナは表示されませんが。

ドロップダウンの高さをうんと小さくすれば、スクロールバーがスピナのように、…みえるかも。
# まぁ、ちまちまスクロールしないと選択肢がわからないのはそれはそれでいらいらする。input type='number'は数字だから次が予測できるわけで。だったら多くの選択肢がみえたほうが、わたしゃ嬉しいですけどね。

Comments

[kine]

返信遅くなってすみません😢⤵️⤵️そのようなやり方もあるのですね。さっそく実践してみます。ご回答頂きありがとうございました。