问题：

如何在免费jqgrid中允许html5数字输入

刁英朗

2023-03-14

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},

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

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

如何指定输入仅为整数或允许小数点？可能是html5验证属性，也添加到为此创建的输入元素中。

在免费jqgrid中如何在表单和行编辑中使用本机日期选择器的答案描述了html5本机日期选择器的用法。也许这也可以用来输入数字

使现代化

我使用来自的示例创建了客户格式化程序

在自定义编辑类型字段中添加多个输入元素

Colmodel：

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

若开始内联编辑，则数字将在单元格中消失。按下内联保存按钮后，出现错误函数“自定义值”未定义。

如何解决这些问题？

白永昌

2023-03-14

当然，可以在免费jqGrid中实现对type=“number”属性和其他HTML5type属性的支持。将来我会考虑这样做。今天，我认为缺少语言环境支持是HTML5type的一大缺点。我认为这是设计上的错误。我建议您查看答案、文章或W3的这篇文章。例如，您可以尝试修改文章中的standrad演示以使用

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

您将看到GoogleChromev.46忽略了lang属性，并使用了Web浏览器的区域设置。换句话说，HTML5type属性的当前状态还没有为多语言支持做好准备。

您可以使用pattern属性进行更好的验证（请参见ansewr），但强制使用，而不是，仍然没有帮助。

如果现在确实需要使用type=“number”属性，可以使用edittype:“自定义”。例如，您可以在答案中找到带有示例的演示。

最后我想提到的是，我上次看到了关于stackoverflow的许多问题，这些问题看起来像是功能请求或是实现某些部分的请求，人们希望在其商业产品中使用这些部分。我在空闲时间开发免费jqGrid。我免费提供工作结果。我只是请求通过PayPal捐款（见自述文件）来促进发展。另一方面，我得到的捐款很少，大多数开发人员更愿意只使用开发的结果。真遗憾。一个人至少可以与另一个人共享他的reauslt（以代码片段的形式）。Stackoverflow和GiHub不是sombody免费提供工作的地方。有人可以给你一些建议，但你还是要充分利用自己的工作。

更新：可以使用edit选项在上设置自定义属性

演示http://jsfiddle.net/OlegKi/kvtrtzc5/2/工作良好，例如在我的谷歌Chrome，但它可能不正确的其他输入数据或其他语言环境Chrome浏览器。因此，我不认为演示是解决方案，它在某些环境中仍然有帮助。我在演示中使用了以下列的定义金额：

{
    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应用程序中仍然没有选择输入元素的语言环境的灵活性。结果仅取决于web浏览器设置，不能在JavaScript应用程序中指定。

如何在免费jqgrid中允许html5数字输入

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档