javascript - 如何防止用户输入小数？

Question

我的网站上有一个订购页面。有些订单项目可以有小数数量，有些则不能。

防止用户输入小数的最佳方法是什么？ (除了警告框和将字段设置为零之外)？

Answer 1

拦截字段的关键事件，在输入时检测非法字符，防止将其输入字段中，并在字段附近添加一个临时消息(插入到页面中)，解释允许使用哪些字符或值。弹出警报是在打字过程中提供反馈的糟糕方式。

然后，在提交之前再次验证，因为还有其他方法可以将数据放入字段(拖/放、复制/粘贴等)，您可能无法捕捉到所有内容。

这是一个 jQuery 示例，其中包含仅整数字段和仅小数字段，当键入无效键时会显示临时消息:

工作 jsFiddle:http://jsfiddle.net/jfriend00/CkDTy/

$(".integer").keypress(function(e) {
    if (e.which < 48 || e.which > 57) {
        showAdvice(this, "Integer values only");
        return(false);
    }
});

$(".decimal").keypress(function(e) {
    // 46 is a period
    if (e.which != 46 && (e.which < 48 || e.which > 57)) {
        showAdvice(this, "Decimal numbers only");
        return(false);
    }
    if (e.which == 46 && this.value.indexOf(".") != -1) {
        showAdvice(this, "Only one period allowed in decimal numbers");
        return(false);   // only one decimal allowed
    }
});

function showAdvice(obj, msg) {
    $("#singleAdvice").stop(true, false).remove();
    $('<span id="singleAdvice" class="advice">' + msg + '</span>').insertAfter(obj);
    $("#singleAdvice").delay(4000).fadeOut(1500);
}