BinaryDevelop
  1. ホーム
  2. html

[解決済み] HTMLの数値入力の最小値と最大値が正しく動作しない

2023-09-07 03:47:50

質問

私は type=number 入力フィールドがあり min と max の値を指定します。 

<input type="number" min="0" max="23" value="14">

レンダリング UI で入力フィールドの右側にある小さな矢印を使用して時間を変更すると、すべてが正しく動作します (23 以上にも 0 以下にもできません)。 しかし、数字を手動で入力 (キーボードを使用) すると、どちらの制限も有効になりません。

誰でも好きな数字を入力できないようにする方法はありますか。

どのように解決するのですか？

HTML5で max と min のようにすれば、数字を入力する値だけを制限することができます。しかし、このような変更を行うには、JavaScriptやjQueryを使用する必要があります。一つのアイデアとして、私が持っているのは data- 属性を使って、古い値を保存することです。 

$(function () {
  $("input").keydown(function () {
    // Save old value.
    if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))
    $(this).data("old", $(this).val());
  });
  $("input").keyup(function () {
    // Check correct, else revert back to old value.
    if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))
      ;
    else
      $(this).val($(this).data("old"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" min="0" max="23" value="14" />

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します