输入以充当桌面和移动设备的数字字段

Question

我在应用程序中有一个如下所示的输入字段，我已将其作为类型编号。用户可以点击上下来增加数字，也可以在字段中输入数值。

<input type="number" name="quantity" id="quantity" value="1" class="form-control" min="1">

但是当我使用移动设备时，同一个字段的行为就像一个文本字段。有什么我可以做的吗？

建议。

Answer 1

您可以使用jquery进行验证，通过使用下面的代码，用户甚至不能在文本框中拖放数字，只需将文本框的类名设为“numericOnly”即可。

$(function () {
    $(".numericOnly").bind('keypress', function (e) {
        if (e.keyCode == '9' || e.keyCode == '16') {
            return;
        }
        var code;
        if (e.keyCode) code = e.keyCode;
        else if (e.which) code = e.which;
        //if (e.which == 46)
        // return false;
        if (code == 8 || code == 46)
            return true;
        if (code < 48 || code > 57)
            return false;
    }
    );
    $(".numericOnly").bind("paste", function (e) {
        e.preventDefault();
    });
    $(".numericOnly").bind('mouseenter', function (e) {
        var val = $(this).val();
        if (val != '0') {
            val = val.replace(/[^0-9.]+/g, "")
            $(this).val(val);
        }
    });
});