限制输入 HTML 中的最大和最小时间 [已关闭]

您可以使用输入的 onChange 处理程序对其进行验证。

   <input value={month} maxlength="2" onChange={(e) => {
         validationFunc(e.target.value)
         setMonth(e.target.value);
    }}/>

您可以在 validtionFunc 中验证输入数据。
谢谢。

您必须将 与适当的 和 一起使用。<input type="number" />minmax

为了实现自定义限制，下面是一个概念证明，将时间值（以秒为单位）保持在状态内，然后将其转换为每个输入的分钟和秒数：

const { useState, useCallback } = React
const limitValue = (min, max, val) => Math.min(max, Math.max(min, val))
const App = () => {
  const [value, setValue] = useState(10)
  const onInput = useCallback(
    (val, minutes) =>
      setValue((prev) =>
        limitValue(
          5,
          1200,
          minutes ? val * 60 + (prev % 60) : ~~(prev / 60) * 60 + val
        )
      ),
    []
  )
  return (
    <div>
      <span>
        <input
          type="number"
          min={0}
          max={20}
          value={~~(value / 60)}
          onInput={({ target: { value } }) => onInput(+value, true)}
        />
        m
      </span>
      <span>
        <input
          type="number"
          min={-1}
          max={60}
          value={value % 60}
          onInput={({ target: { value } }) => onInput(+value)}
        />
        s
      </span>
      <pre>
        {JSON.stringify(
          {
            value,
            minutes: ~~(value / 60),
            seconds: value % 60
          },
          null,
          2
        )}
      </pre>
    </div>
  )
}
ReactDOM.createRoot(root).render(<App />)

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="root"></div>

没有经过全面测试，但您可以尝试这样的方法。

使用适当的属性设置输入字段后，例如并确保将 and 属性设置为您的条件（最多 20 分钟，最短 5 秒），然后您可以使用绑定到合适父级（在本例中的文档，但可以/应该更集中）的委托侦听器来监视事件。typetype='number'minmaxinput

事件处理程序标识所有相关的元素（此处按名称），并对每个元素的值执行一些基本操作，以创建以秒为单位的总时间值。如果该时间值超出您的限制，请警告用户和/或设置您自己的默认值。input

document.addEventListener('input',e=>{
  if( ['minutes','seconds'].includes( e.target.name ) ){
    
    const mapcallback=(n)=>n.name=='minutes' ? n.value * 60 : n.value;
    const reducecallback=(a,b)=>a+parseInt(b);
    /*
      find the numeric input elements,
      convert minutes to seconds and
      create sum of both mins & secs values.
    */
    let total=[...document.querySelectorAll('input[type="number"]')]
        .map( mapcallback )
        .reduce( reducecallback, 0 );
    
    /* warn the user if selected values are out of range.*/
    if( total < 5 ){
      console.log('Must be at least 5s');
    }
    if( total > 1200 ){
      console.log('Can be no more than 1200s / 20mins');
      document.querySelector('[name="seconds"]').value=0;
    }
  }
});

<div>
  <label>
    <input name='minutes' type='number' min=0 max=20 value=0 maxlength=2 />
    <span>m</span>
  </label>
  
  <label>
    <input name='seconds' type='number' min=5 max=59 value=5 maxlength=2 />
    <span>s</span>
  </label>
</div>

要仅使用 Javascript 执行此操作，并在无效输入时显示警报：

  <form>
    <label for="minutes">Minutes:</label>
    <input type="number" id="minutes" min="0" max="20" oninput="validateTime()" required>
    
    <label for="seconds">Seconds:</label>
    <input type="number" id="seconds" min="0" max="59" oninput="validateTime()" required>
  </form>

  <script>
    function validateTime() {
      var minutes = parseInt(document.getElementById('minutes').value, 10);
      var seconds = parseInt(document.getElementById('seconds').value, 10);

      if (isNaN(minutes) || isNaN(seconds)) {
        alert('Please enter valid numbers for minutes and seconds.');
        return;
      }

      if (minutes < 0 || minutes > 20 || seconds < 0 || seconds > 59) {
        alert('Please enter a valid time. Minutes should be between 0 and 20, and seconds between 0 and 59.');
        return;
      }

      // You can do something with the valid input here, or remove this alert.
      alert('Valid input: ' + minutes + ' minutes ' + seconds + ' seconds');
    }
  </script>