如何限制文本输入中的键入数字

Question

我有用于分页页面更改的文本输入。 我需要将页码的输入限制为fe 15（最大页数）。 所以我正在尝试下面的这段代码，但总是在数字大于15时将值更改为15并实际键入数字。

actual.on('keypress', function() {
    console.log('test');
    var t = $(this);
    if (t.val() < 1) t.val('1');
    if (t.val() > 15) t.val('15');
});

小提琴： http : //jsfiddle.net/v6fhobr7/

有人可以帮忙吗？

Answer 1

尝试将其从'keypress'更改为'keyup' ...略有闪烁，但可以。

Answer 2

使用number字段。

 <input type="number" min="1" max="15" step="1"> 

Answer 3

@rfornal的解决方案可以 ，但是除非您非常快，否则很难输入一位数字值：

http://jsfiddle.net/v6fhobr7/7/

因此，最好在更改该值之前先设置一点超时时间：

var actual = $('.actual');
var tm;

actual.on('keyup', function () {
    var t = $(this);

    if (tm) clearTimeout(tm);
    tm = setTimeout(function() {
        if (t.val() < 1) t.val('1');
        if (t.val() > 15) t.val('15');
    }, 250);
});

JSFiddle演示： http : //jsfiddle.net/v6fhobr7/10/

Answer 4

在jQuery 2.x中，您可以使用actual.on('input') ，它可以实现您想要的而不会闪烁。

请注意，这将防止用户完全清除输入内容。 如果要允许这样做，则可能需要明确处理t.val() == '' 。

actual.on('input', function(e) {
    var t = $(this);
    if (t.val() == '') return;
    if (t.val() < 1) t.val('1');
    if (t.val() > 15) t.val('15');
});

http://jsfiddle.net/v6fhobr7/12/

编辑：

请注意，此解决方案不仅将输入限制为仅数字字符（您仍然可以键入字母和符号）。 如果您想避免这种情况，请在上述我的回答之外使用此解决方案 。

或者，如果您不关心IE 9或移动浏览器，那么Mathletics的答案是最好的。