入力タイプが「数値」の場合、スピナーコントロールを使用した入力のみを許可する方法はありますか? 質問する

Question

ここでJavascript イベントを使用できますonkeydown...これにより、ユーザーは何も入力できなくなりますが、矢印コントロールを使用して数字を増減することはできます。

<input type="number" min="0" value="0" step="5" onkeydown="return false" />

Demo

注意: JavaScript と HTML に依存せず、常にサーバー側で検証を行い、ユーザーが悪意のある入力を投稿していないことを確認してください。JavaScript を無効にして、ユーザーがテキストボックスに任意のテキストを追加して悪用することは可能ですが、これを止める方法は他にないため、サーバー側でもチェックを行ってください。

ユーザーが混乱しないようにテキスト選択も無効にしたいとコメントされているように、ここで CSS 配置テクニックを使用することもできます。対象ユーザーは Chrome のみであるため、クロスブラウザの問題はあまりなく、次のようなことができます...

Demo 2

input要素を要素でラップしspan、CSS の配置テクニックと:after疑似要素のみを使用して、の上に仮想要素をオーバーレイしますinput。

ここでは、デモンストレーションの目的でアウトラインを残しておいたので、安全に削除できます。

span {
    position: relative;
    outline: 1px solid #00f;
}

span:after {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    outline: 1px solid red;
    width: 91%;
}

Answer 1