表单字段数量向上/向下按钮，不允许负数？答案

【问题标题】：Form field quantity up/down buttons, don't allow negative numbers?表单字段数量向上/向下按钮，不允许负数？
【发布时间】：2012-04-12 08:48:02
【问题描述】：

http://jsfiddle.net/KYDPd

有没有办法让最小数字为0，并且不允许用户在点击时低于0？

<form>
  <input type="text" name="name" value="0" />
  <input type="button" value="up" onclick="this.form.name.value++;" >
  <input type="button" value="down" onclick="this.form.name.value--;">
</form>

【问题讨论】：

标签： javascript html input

【解决方案1】：

如果不需要单独的按钮并且 HTML5 是一个选项，你可以使用这个：

<form>
    <input type="number" min="0" name="name" value="0" />
</form>

【讨论】：

【解决方案2】：

这应该可以解决问题。在允许每个操作之前检查值是多少。还向文本输入添加了 onchange 以强制执行您的最低 0 要求。同意其他答案，虽然这应该在一个函数中。

http://jsfiddle.net/xqV6V/1/

<form>
    <input type="text" name="name" value="0" onchange="if(this.value<0){this.value=0;}" />
    <input type="button" value="up" onclick="if(this.form.name.value>=0){this.form.name.value++;}" >
    <input type="button" value="down" onclick="if(this.form.name.value>0){this.form.name.value--};">
</form>

【讨论】：

我可以接受两个答案吗:)？ onchange 添加很棒。并不真正担心人们手动输入负数，但仍然是一个不错的补充。

【解决方案3】：

您可能应该将此 JavaScript 放在 function 中。

<form>
    <input type="text" name="name" value="0" />
    <input type="button" value="up" onclick="this.form.name.value++;" >
    <input type="button" value="down" onclick="if(this.form.name.value>0)this.form.name.value--;">
</form>

附加答案与功能。

<script>

function ud_find_text(self) {
    var children = self.parentNode.getElementsByTagName('input');
    for (var i = 0; i < children.length; i++) {
        if (children[i].getAttribute('type') == 'text') {
            return children[i];
        }
    }
}

function ud_inc(self) {
    var text = ud_find_text(self);
    text.value++;
}

function ud_dec(self) {
    var text = ud_find_text(self);
    if (text.value > 0) text.value--;
}

</script>

<form>
  <input type="text" name="name" value="0" />
  <input type="button" value="up" onclick="ud_inc(this)" >
  <input type="button" value="down" onclick="ud_dec(this)">
</form>

【讨论】：

这可能是最好的，因为我需要在表单中重复大约 200 次。重复我认为标记过度的功能。
@delime 我已经添加到答案中，展示了如何使用函数来做到这一点。您定义函数一次，然后对每个字段反复使用它们。请注意，它假定要更改的字段始终是文本字段！
@delime 另外：您可以使用 jQuery 使代码更短。