表单字段数量上/下按钮,不允许负数?

时间:2012-04-12 08:48:02

标签: javascript html input

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>

3 个答案:

答案 0 :(得分:5)

如果不需要单独的按钮,HTML5是一个选项,你可以使用它:

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

答案 1 :(得分: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>

答案 2 :(得分:1)

您应该将此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>