如何让用户只能写00到24之间的数字

Question

这是我的问题：我想让用户只写 00 到 24 之间的数字。

Js代码：

const putRealTime = () => {
    const hoursRangePattern = /^(2[0-3]|1[0-9]|[0-9])$/;

    document.querySelector(".hour-min-input").addEventListener("keypress", (e) => {
        if (e.which < 48 || e.which > 57) {
            e.preventDefault();
        }
    })

    document.querySelector(".hour-min-input").addEventListener("keypress", (e) => {
        const eKey = parseInt(e.key)
        if (hoursRangePattern.test(eKey)) {
            e.preventDefault()
        }
    })
}

Ruby代码：

            <div class="hours-container-1">
              <p class="">Your event will start at :</p>
              <div class="hours-container-2 align-items-end">
                <%= f.input :min_timeh, label: false, placeholder: "hh", input_html: { min: '0', max: '24', step: '1' }, input_html: { class: 'hour-min-input', maxlength: 2 }%>
                <p class="double-point">:</p>
                <%= f.input :min_timem, label: false, placeholder:"mm", input_html: { min: '0', max: '59', step: '1' }, input_html: { class: 'min-min-input', maxlength: 2 }%>
              </div>
            </div>

非常感谢！

Answer 1

在您的 keypress 事件中，您需要验证输入值，以访问类似以下内容的值：

document.querySelector(".hour-min-input").addEventListener("keypress", (e) => {
  const value = Math.min(24, Math.max(0, e.target.value));
  e.target.value = value;
  const eKey = parseInt(e.key)
  if (hoursRangePattern.test(eKey)) {
    e.preventDefault()
  }
})

将这 2 行新行捆绑在一个函数中，该函数将 event/min/max 作为一组参数并将其应用于事件侦听器回调返回的两个事件。

Answer 2

您正在使用 f.input，所以我假设您已经安装了 gem 'simple_form'。在 simple_form:

= f.input :min_timeh, label: false, placeolder: "hh", collection: 0..23
= f.input :min_timem, label: false, placeolder: "mm", collection: 0..59

为此您不需要额外的 javascript。

此外，您可以将以下验证添加到包含 2 列 min_timeh 和 min_timem 的模型中：

validates :min_timeh, numericality: { greater_than_or_equal_to: 0, less_than_or_equal_to: 23 }
validates :min_timem, numericality: { greater_than_or_equal_to: 0, less_than_or_equal_to: 59 }

如果你确实想让验证更多"fancy"，这里有一个gemhttps://github.com/DavyJonesLocker/client_side_validations

Answer 3

在 js 中你可以这样：

var regexp, x;
x = $(this).val();
regexp = /([01][0-9]|[2][0-3]):[0-5][0-9]/;
if (!regexp.test(x)) {
  return $(this).val("00:00");
}

注意：对于正则表达式模式：

第一部分“[01][0-9]”如果第一个数字介于 0 或 1 之间，则第二个数字可以介于 0..9
或第二部分“[2][0-3]” 如果第一个数字 2 那么第二个数字必须在 0..3
第三部分 [0-5][0-9] 分钟只允许在 00 - 59
如果它没有通过正则表达式，那么我们用 00:00

Answer 4

希望我的 regex-fu 技能更好...

const input = document.querySelector(".hour-min-input")

const putRealTime = () => {

    input.addEventListener("keydown", (event) => {
        const key = event.key;
        const value = event.target.value;
        const length = value.length;
        
        if (key === "Backspace") {
          return;
        }

        if((length === 0 && !/^[0-2]$/g.test(key))
        || (length === 1 && Number(value) === 1 && !/^[0-9]$/g.test(key))
        || (length === 1 && Number(value) === 2 && !/^[0-3]$/g.test(key))
        || (length >= 2)
        ) {
          return event.preventDefault()
        }
        
    })
}

putRealTime();

<input type="text" class="hour-min-input">

如何让用户只能写00到24之间的数字

How to allow the user to only write numbers between 00 and 24

javascript

ruby-on-rails

simple-form