如何在页面加载时将最小输入 [type=number] 值设置为初始值？

Question

我需要使输入[type=number] 字段只接受大于初始值的数字，而不是小于初始值。我试过：

<div class="form-row">
    <label for="SOA_Serial" class="col-sm-2 col-form-label" style="max-width:150px;">Serial: </label>
    <input type="number" id="serial_input" class="form-control" name="SOA_Serial" style="width:330px;" value="<?php echo escape($SOA_array[2]);?>" onchange="document.getElementById('serial_input').min=this.value;">
</div>

但是，也有问题。

1) 首先点击箭头，它允许我递减一次，然后不再递减。它根本不需要减少。

2) 如果我递增，然后递减，因为onchange，我不能回到原来的数字。

我怎样才能 a) 防止递减低于原始值，或者 b) 完全禁用向下箭头？那可能吗？

Answer 1

你的意思是这样的吗？

let changed = (element) => {
  let initial = element.defaultValue * 1;
  if (element.value < initial) {
    element.value = initial;
  }
}

<input type="number" value="24" onchange="changed(this)">

编辑： 我刚刚意识到有一个内置属性就是为了这个原因，所以 JavaScript 有点矫枉过正

<input type="number" value="24" min="24">

如何在页面加载时将最小输入 [type=number] 值设置为初始值？

How to set min input[type=number] value to initial value upon page load?

html

input

onchange