如何限制手动输入时html5数字输入的最大值 [英] How to restrict max value on html5 number input on manual entry

问题描述

免费的jqgrid列被定义为使用html5数字输入类型，如

  {name：amount，width：62， template：number，
 formatter：number，formatoptions：{decimalSeparator：，，thousandsSeparator：，decimalPlaces：4，defaultValue：'0.0000'}，
 editoptions：{
 maxlength; 4 
类型：数字，
最大值：9999 
}}，
  

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

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

testcase是

如果输入类型为文本，则输入为maxlength value。

解决方案

尝试使用以下内容

  {
 name：amount ，
宽度：62，
模板：数字，//格式化程序：数字
格式选项：{
 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（）; 
} 
} 
} 
] 
} 
 
} 
  

上面的代码调用 checkValidity（） 的方法< input type =number> ; 。因为您需要在代码中包含其他测试，例如验证 e.target.checkValidity 是一个函数（对于在旧的Web浏览器中执行的情况）和其他一些函数。上面的代码只显示验证的主要思想，它使用< input type =number> 的功能。

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

Free jqgrid column is defined to use html5 number input type like

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

It allows to enter numbers from keyboard greater than 9999. max: 9999 affects only to entry using spinner.

How to fix this so that keyboard entry cannot exceed 9999 ?

testcase is at

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

It allows to manually enter numbers greater that 9999 into Amount column. How to restrict manual entry to 9999 ? I tried also to use string max value max: '9999' but problem persists.

If input type is text, input respects maxlength value.

解决方案

Try to use something like the following

{
    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();
                        }
                    }
            }
        ]
    }

}

The above code calls checkValidity() method of <input type="number">. Of cause you need to include additional tests in the code like validation that e.target.checkValidity is a function (for the case of executing in old web browser) and some other. The above code just shows the main idea of validation which uses functionality of <input type="number">.

See the demo http://jsfiddle.net/OlegKi/jhckz7rr/8/, which works for both inline editing and form editing.

这篇关于如何限制手动输入时html5数字输入的最大值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！