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

【问题标题】：How to limit typing number in text input如何限制文本输入中的输入数字
【发布时间】：2015-01-31 09:33:13
【问题描述】：

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

有人可以帮忙吗？

【问题讨论】：

标签： javascript jquery pagination

【解决方案1】：

在 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 的答案是最好的。

【讨论】：

【解决方案2】：

使用number 字段。

&lt;input type="number" min="1" max="15" step="1"&gt;

【讨论】：

它不会为您重写值，但会限制有效响应的集合。
这是一个非常优雅的解决方案，但并非所有浏览器都支持（例如移动浏览器或 IE caniuse.com/#feat=input-number
这是解决您问题的方法，但不是解决您问题的方法。 “我如何限制对字段的输入”是解决“我如何只接受有效响应”问题的解决方案。但我离题了。 @aj_r 是正确的；我认为这个功能得到了更广泛的支持。

【解决方案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/

【讨论】：

hmmm，我没有这个问题与单个数字，一切正常，但是thx

【解决方案4】：

尝试将其从 'keypress' 更改为 'keyup' ... 有轻微的闪烁，但它可以工作。

【讨论】：