Question

如何在文本字段中为数字上下设置范围？文本框中的值可以使用向上和向下键增加和减少吗？

我正在使用带有两个图像（向上和向下）的文本框，如（用于增量）和（用于递减）这里如何设置范围0到100（我在struts中工作）

Answer 1

查看为此做的HTML5输入。

<input type="number"
       min="0"
       max="10"
       step="2"
       value="6">

如果您想使用JavaScript，请尝试...

var input = document.getElementById('your-number-input'),
    lowerBound = 0,
    upperBound = 10;

input.onkeyup = function(event) {
    event.preventDefault();

    var value = parseInt(input.value, 10),
        keyCode;

    if (isNaN(value)) {
        value = 0;
    }

    if (window.event) {
        keyCode = event.keyCode
    } else if (event.which) {
        keyCode = event.which
    }

    if (keyCode == 38) {
       value++;
    } else if (keyCode == 40) {
       value--;  
    }

    if (value > upperBound) {
        value = upperBound;
    } else if (value < lowerBound) {
       value = lowerBound;
    }

    input.value = value;
}

jsFiddle

Answer 2

编辑：根据Alex的回答，HTML5中有一个字段，所以我关于没有一个字段的陈述是不正确的。

HTML中没有数字上下字段，所以我假设您正在使用javascript实现（类似于此http://www.htmlforums.com/client-side-scripting/t-help-with-numericupdown-control-59399.html）。

让向上和向下按钮的onclick事件触发JavaScript函数。在这个函数中，它使用if语句检查它正在改变的值，如果它太大，不要增加它，反之亦然。

你想要下面的内容。我有一段时间没有使用过javascript，所以我无法保证正确的语法。

if (document.getElementById("input1").value < 5)
{
    document.getElementById("input1").value++
}

关于按键，请查看http://www.w3schools.com/jsref/event_onkeypress.asp。使用此选项可以触发与网页上的向上和向下按钮相同的功能。

如何设置文本字段中的范围以进行数字上下？

2 个答案: