JavaScript-javascript/jQuery input输入数字如何不超过最大值 并且不低于最小值

Question

问题描述：在做web app 前端时碰到的问题。 该input包含max 和 min 属性，我想要限制用户的输入，当超过最大值，则显示最大值，低于最小值时，则显示最小值，下面是我的方法，不报错，但是效果也没出来。

html:

<input type="number" id="cartCount" name="count" value="1" min="1" max="2" data-price="180.00" class="full-width ui-state-valid" pattern="^[d]+$" />

Answer 1

第一行直接用id选取即可，你这么写反而效率低。

Answer 2

绑定一个事件，keyup，然后做校验，将当前值parseInt 然后比较，做处理

Answer 3

JS部分：
// 判断限购数值大小 我自己写出来了，，可能不够高端，不过能用，希望大牛可以帮我优化！

var $mathBox = $("#cartCount");
$mathBox.on('keyup', function() {
var cur = parseInt($mathBox.val()),
max = parseInt($mathBox.attr("max")),
min = parseInt($mathBox.attr("min"));
if (cur > max) {
$mathBox.val(max);
};
if (cur < min) {
$mathBox.val(min);
}
})

效果是，当输入的数字超出预期范围时，过小时文本框内显示最小值，过大时则为最大值。限制用户随意输入。没有在input上写onkeyup，用jquery写了相关的事件。