如何允许在 free-jqgrid 中输入 html5 数字

Question

html5 的数字输入类型类似于

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<input type="number"  />
</body>
</html>

在这种情况下，非数字字符在输入时被禁用。本机纯数字小键盘会自动出现在触摸设备中。

如何强制免费 jqgrid 字段编辑使用此类型？

jgrid 列定义为

{"label":"Quantity","name":"Valkogus",
 "index":"Valkogus","align":"right",
 "searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"]},
 "editoptions":{"maxlength":7,
 "dataEvents":[{"type":"change","fn":function(e) {dataChanged(e.target)}
},
{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}}
}],"style":"text-align:right","readonly":null,"class":"jqgrid-inlineedit-element ","disabled":null},
 "editable":true,"width":62,
 "classes":null,"hidden":false},

jqgrid 是从远程 json 数据创建的。使用内联和表单编辑和搜索工具栏。这允许输入任何字符。在触摸设备中出现全键盘。

如何解决此问题，以便在编辑和工具栏搜索中此字段显示 type="number" 属性？

如何指定输入只能是整数还是允许有小数位？可能 html5 验证属性并添加到为此创建的输入元素中。

中的答案描述了 html5 本机日期选择器的用法。也许这也可以用来输入数字

更新

我使用来自

的示例创建了客户格式化程序

Add multiple input elements in a custom edit type field

科尔模型：

{"edittype":"custom",
"name":"Kogus",
"align":"right",
"searchoptions":{"sopt":["eq","ne","lt","le","gt","ge"]},
"editoptions":{"custom_element":function(value, options) {
return numeric_element(value, options,'58','Kogus','RidG','ArtKogus')}
,
"custom_value":combobox_value,
"maxlength":12,

"style":"text-align:right",
"readonly":null,
"disabled":null
 },
"editable":true,
"width":58,
"classes":null,
"hidden":false
},

javascript

function numeric_element(value, options, width, colName, entity, andmetp) {
    var elemStr, newel;
    elemStr = '';
    if (options.id === options.name) {
        elemStr += '<input type="number" class="FormElement" size="' +
                options.size + '"' + ' id="' + options.id + '"';
    }
    else {
        elemStr += '<input type="number" ' +
           ' style="text-align: right; width: 100%; box-sizing: border-box;"     ' +
           ' id="' + options.id + '" maxlength="'+ options.maxlength+'"  name="'+options.name+'"';

    }
    elemStr += ' value="' + value + '"/>';
    newel = $(elemStr); 
    return newel;
}



function combobox_value(elem, operation, value) {
    if (operation === 'get') {
        return $(elem).find("input").val();
    } else if (operation === 'set') {
        $('input', elem).val(value);
    }
}

如果开始内联编辑，单元格中的数字会消失。按内联保存按钮后，出现错误 function 'custom_value' undefined。

如何解决这些问题？

Answer 1

当然可以在免费的 jqGrid 中实现对 type="number" 属性和其他 HTML5 type 属性的支持。我会考虑在未来这样做。今天我看到缺少 locale 支持 是 HTML5 type 的一大缺点。我认为这是设计错误。我建议您查看 the answer or the article or this one from W3. You can try for example to modify the standrad demo from the article 以使用

<input type="number" name="quantity" min="0.01" max="10" lang="de">

您会看到 Google Chrome v.46 忽略 lang 属性并使用网络浏览器的区域设置。换句话说，HTML5 type 属性的当前状态尚未为企业多语言支持做好准备。

您可以使用 pattern 属性进行更好的验证（参见 the ansewr），但它仍然无助于强制使用 , 而不是 .在具有英语语言环境的网络浏览器中。

如果您现在确实需要使用 type="number" 属性，您可以使用 edittype: "custom". You can find the demo with an example in the answer 例如。

最后我想提一下，我上次在 Whosebug 上看到很多问题，这些问题看起来像是功能请求或要求实现某些部分，有人想在他的商业产品中使用这些部分。我在空闲时间开发免费的 jqGrid。我免费提供工作成果。我只是要求通过 PayPal 捐款来为开发做出贡献（参见 the readme）。另一方面，我得到的捐赠很少，而且大多数开发人员更愿意只使用开发的结果。真遗憾。至少可以与其他人分享他的成果（以代码片段的形式）。 Whosebug 和 GiHub 不是让你免费工作的地方。可以给你一些提示，但你仍然必须自己充分利用这项工作。

UPDATED：可以使用 editoptions 在 <input> 元素上设置自定义属性，但正如我之前所写，它并非在所有情况下都有效。

演示 http://jsfiddle.net/OlegKi/kvtrtzc5/2/ 在我的 Google Chrome 中运行良好，但对于其他输入数据或 Chrome 浏览器的其他区域设置可能无法正常工作。因此我不认为演示是解决方案，它在某些环境中可能仍然有用。我在演示中使用了列的以下定义 "amount":

{
    name: "amount",
    width: 62,
    template: "number",
    editoptions: {
        type: "number", 
        step: "0.01",
        min: "0.00",
        max: "1000",
        pattern: "[0-9]+([\.|,][0-9]+)?",
        title: "This should be a number with up to 2 decimal places."
    }
}

更新 2： 另一个演示 http://jsfiddle.net/OlegKi/kvtrtzc5/3/ 使用德语语言环境 来显示 数据。如果您在 Google Chrome 中有德语 GUI 语言（必须重新启动 Google Chrome 进程，最好注销并从系统登录）然后用户将看到 ,作为小数点分隔符。

Web 应用程序在选择输入元素的区域设置方面仍然没有灵活性。结果仅取决于网络浏览器设置，无法在 JavaScript 应用程序中指定。

如何允许在 free-jqgrid 中输入 html5 数字

How to allow html5 number input in free-jqgrid

html

javascript

jquery

jqgrid

free-jqgrid