问输入type=“数字”为3位数字或8位数字

EN

<form>
  <label for="num-input">3 or 8 digit number: </label>
  <input id="num-input" 
         type="text"
         required
         pattern="\d{3}|\d{8}" 
         title="must be 3 or 8 digit"/>
  <br/>
  <input type="submit" value="submit" />
</form>

<input type="number" max="999" min="-999" />

document.querySelector('input[max], input[min]').onblur = function (event) {
  const numValue = Number(event.target.value);
  // if within the expected range, do nothing
  if (numValue  < event.target.max && numValue  > event.target.min) return;
  // check if it's closer to max than to min,
  // then set the value to max or min accordingly
  event.target.value = event.target.max - numValue  < event.target.min - numValue  ?
    event.target.max :
    event.target.min;
}

document.querySelector('input').onblur = function (event) {
  let valString = Number(event.target.value).toString();
  if (valString.length === 3 || valString.length === 8) return;
  event.target.value = valString.length > 8 ?
    valString.substr(0, 8) :
    (valString.length > 3 ? valString.substr(0, 3) : null);
}

<input type="number" />