html5 有像这样的数字输入类型
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<input type="number" />
</body>
</html>
在这种情况下，非数字字符在输入时被禁用。 native 纯数字小键盘会自动出现在触摸设备中。
如何强制免费 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 验证属性也添加到为此创建的输入元素中。
在 How to use native date picker in both form and row editing in free jqgrid 中回答描述了 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。
如何解决这些问题？
最佳答案
当然可以实现对 type="number" 的支持属性和其他 HTML5 type免费 jqGrid 中的属性。我会考虑在未来这样做。今天，我将缺少的locale 支持 视为 HTML5 的一大缺点 type .我认为这是设计错误。我推荐你看看the answer或 the article或 this one from W3 .例如，您可以尝试修改 the standrad demo来自 the article使用
<input type="number" name="quantity" min="0.01" max="10" lang="de">
您会看到 Google Chrome v.46 忽略了 lang属性并使用 Web 浏览器的区域设置。换句话说，HTML5 的当前状态 type属性尚未准备好支持多语言。
您可以使用 pattern属性以获得更好的验证(参见 the ansewr )，但它仍然无助于强制使用 ,而不是 .在具有英语语言环境的 Web 浏览器中。
如果您确实需要使用 type="number"现在属性，你可以使用edittype: "custom" .您可以在 the answer 中找到带有示例的演示例如。
最后我想提一下，我上次在 stackoverflow 上看到很多问题，这些问题看起来像是功能请求或要求实现某些部分，有人想在他的商业产品中使用这些部分。我在空闲时间开发免费的 jqGrid。我免费提供工作成果。我只是要求通过 PayPal 捐赠来为开发做出贡献(参见 the readme )。另一方面，我得到的捐赠很少，而且大多数开发人员更愿意只使用开发的结果。真遗憾。至少可以与其他人分享他的成果(以代码片段的形式)。 Stackoverflow 和 GiHub 不是让你免费工作的地方。可以给你一些提示，但你仍然必须自己充分利用这项工作。
已更新:可以使用 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 应用程序在选择输入元素的语言环境方面仍然没有灵 active 。结果仅取决于网络浏览器设置，无法在 JavaScript 应用程序中指定。
关于javascript - 如何允许在 free-jqgrid 中输入 html5 数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33756048/