如何在页面加载时将 min input[type=number] 值设置为初始值？答案

【问题标题】：How to set min input[type=number] value to initial value upon page load?如何在页面加载时将 min input[type=number] 值设置为初始值？
【发布时间】：2018-05-30 15:57:07
【问题描述】：

我需要让 input[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）完全禁用向下箭头？那可能吗？

【问题讨论】：

请提供a Minimal, Complete, and Verifiable example
觉得已经够完整了。现在添加了整个 div。

标签： html input onchange

【解决方案1】：

你的意思是这样的吗？

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

&lt;input type="number" value="24" onchange="changed(this)"&gt;

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

&lt;input type="number" value="24" min="24"&gt;

【讨论】：

所有这些都在 change() 函数中吗？
好吧，没关系，我看到你用“let changed = (element)”做了什么。但是，它仍然允许我在单击两次后递减。
@IRGeekSauce 我已经编辑了我的答案。您确定可以将值减小到 24 以下吗？
我没有意识到一旦焦点离开输入，它就变回来了。有用！谢谢！
效果更好。我只是在 min 中回显了我的初始值（因为它是一个 php 变量），例如： min="" 它就像一个魅力。感谢您帮助并教会了我一些东西。