首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >不允许用户输入除1到999以外的任何值,包括小数。

不允许用户输入除1到999以外的任何值,包括小数。
EN

Stack Overflow用户
提问于 2016-06-14 00:23:27
回答 3查看 119关注 0票数 2

我希望允许用户在输入框中输入1到999之间的值。

我尝试了以下方法

代码语言:javascript
运行
复制
<input name="quantity" class="numbers" value=""/>

$('.numbers').keypress(function (e) {
    var value = parseInt($(this).val());
    if (value <= 0 || value > 999) {
        return false;
    }
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        return false;
    }
});

这不起作用,当我输入零值时,我被卡住了,这里是https://jsfiddle.net/kcet86s8/4/小提琴的链接。

我哪里出问题了?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-06-14 02:12:33

为了清楚起见,你应该在你的问题上加上这个。

不允许用户输入除1到999以外的任何值,包括小数。

您的问题是:您希望限制用户输入,这取决于输入的值。但是"keypress“事件是在更新值之前触发的,因此您得到的值是旧值,而不是新值(这很容易检查)

您的需求中的问题是,在更新输入之前无法获得新值,至少jquery不能这样做。因此,您不能限制用户输入在“按键”。

以另一种方式,你可以使用“键”。如果用户输入了错误的值,则恢复最后的值。.i.e:https://jsfiddle.net/kcet86s8/7/

代码语言:javascript
运行
复制
$(document).ready(function () {
  $.myval = $('.numbers').val();
    $('.numbers').keyup(function (e) {
        var value = parseInt($(this).val());
        if (value <= 0 || value > 999) {
        $(this).val($.myval);
            return false;
        }
        if ((e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57))) {
        $(this).val($.myval);
            return false;
        }
      $.myval = $(this).val();
    });
});

用户在恢复输入值之前仍然可以看到它。我认为这并不完美,但这是唯一的办法。

更新键代码条件以启用numpad输入,如@Midas建议的那样:https://jsfiddle.net/kcet86s8/10/

代码语言:javascript
运行
复制
$(document).ready(function () {
  $.myval = $('.numbers').val();
    $('.numbers').keyup(function (e) {
        var value = parseInt($(this).val());
        if (value <= 0 || value > 999) {
        $(this).val($.myval);
            return false;
        }
        if (e.which != 8 && e.which != 0 && !(e.which >= 48 && e.which <= 57) && !(e.which >= 96 && e.which <= 105)) {
        $(this).val($.myval);
            return false;
        }
      $.myval = $(this).val();
    });
});
票数 3
EN

Stack Overflow用户

发布于 2016-06-14 00:52:26

您可以使用<input type="number">元素、带有参数0, -1input事件String.prototype.slice()删除input值的最后一个字符,如果在第一个if条件下使用valueAsNumber属性代替parseInt()

代码语言:javascript
运行
复制
$(document).ready(function() {
  $(".numbers").on("input", function(e) {
    var value = this.valueAsNumber;
    if (value <= 0 || value > 999) {
      this.value = this.value.slice(0, -1);
    }
    // if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
    //     return false;
    // }
  });
});
代码语言:javascript
运行
复制
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<input name="quantity" type="number" class="numbers" value="" />

jsfiddle https://jsfiddle.net/kcet86s8/5/

票数 3
EN

Stack Overflow用户

发布于 2016-06-14 00:27:17

您可以使用<input type="number">,它具有minmax属性:

代码语言:javascript
运行
复制
<input type="number" min="1" max="999" value="1">

浏览器支持

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37801127

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档