如何在手动输入时限制 html5 数字输入的最大值

Question

自由 jqgrid 列定义为使用 html5 数字输入类型，如

{ name: "amount", width: 62, template: "number",
             formatter: "number", formatoptions: {decimalSeparator:",", thousandsSeparator: " ", decimalPlaces: 4, defaultValue: '0.0000'},
               editoptions: {
                   maxlength; 4
                   type: "number", 
                   max: 9999
               } },

允许从键盘输入大于 9999 的数字。 max: 9999 仅影响使用微调器的条目。

如何解决这个问题，使键盘输入不能超过 9999？

测试用例在

http://jsfiddle.net/jhckz7rr/3/

它允许手动将大于 9999 的数字输入到金额列中。如何将手动输入限制为 9999？我也尝试使用字符串最大值 max: '9999' 但问题仍然存在。

如果输入类型是文本，输入会考虑最大长度值。

Answer 1

使用 jQuery 创建输入验证。

事件侦听器在点击编辑时附加，并在点击保存时移除。我使用 setTimeout，与 free-jqgrid 元素操作同步——因为正确的解决方案是扩展 free-jqgrid 功能

function restrictMax(){

    var max = parseFloat($(this).attr('max'))
    var value = parseFloat($(this).val())
    if($(this).val() > max){
        $(this).val(max)
    }
}
setTimeout(function(){
    $('.fa-pencil').click(function(){ //click on edit
        var thatParent = $(this).closest('tr')
        setTimeout(function(){

            thatParent.find('input[type="number"]').on('input',restrictMax)
        },0);
    })
    $('.fa-floppy-o').click(function(){ //click on save
        var thatParent = $(this).closest('tr')
        setTimeout(function(){
            thatParent.find('input[type="number"]').off('input',restrictMax)
        },0)
    })

},0)

http://jsfiddle.net/jhckz7rr/6/

Answer 2

尝试使用类似下面的东西

{
    name: "amount",
    width: 62,
    template: "number", // formatter: "number"
    formatoptions: {
        decimalSeparator: ",",
        thousandsSeparator: " ",
        decimalPlaces: 2,
        defaultValue: "0,00"
    },
    editoptions: {
        maxlength: 7,
        type: "number",
        max: "9999",
        dataEvents: [
            {
                type: "blur",
                fn: function (e) {
                        if (e.target.checkValidity()) {
                            $(e.target).removeClass("ui-state-error");
                        } else {
                            $(e.target).addClass("ui-state-error");
                            alert(e.target.validationMessage);
                            $(e.target).focus();
                        }
                    }
            }
        ]
    }

}

以上代码调用了<input type="number">的checkValidity()方法。因为你需要在代码中包含额外的测试，比如验证 e.target.checkValidity 是一个函数（对于在旧的网络浏览器中执行的情况）和其他一些。上面的代码只是展示了验证的主要思想，它使用了 <input type="number">.

的功能。

查看演示 http://jsfiddle.net/OlegKi/jhckz7rr/8/，它适用于内联编辑和表单编辑。

如何在手动输入时限制 html5 数字输入的最大值

How to restrict max value on html5 number input on manual entry

html

javascript

jquery

jqgrid

free-jqgrid