Question

我有一个用于更改分页页面的文本输入。我需要将页码的输入限制为某个数字f.e. 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字段。

＆＃13;

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

＆＃13;

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/

修改

请注意，此解决方案不会将输入限制为仅限数字字符（您仍然可以键入字母和符号）。如果您想阻止这种情况，请在上面的回答中使用this solution。

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

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

4 个答案: