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验证属性，并且还为此创建了输入元素。

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

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

如果启动了内联编辑，则数字会在单元格中消失。按内联保存按钮后，出现错误function 'custom_value' undefined。

如何解决这些问题？

Answer 1

原因之一是可以在免费的jqGrid中实现对type="number"属性和其他HTML5 type属性的支持。我将来会考虑这样做。今天，我发现缺少区域设置支持是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属性并使用网络浏览器的区域设置。换句话说，HTML5 type属性的当前状态并不适合多语言支持。

您可以使用pattern属性进行更好的验证（请参阅the ansewr），但仍无法强制使用,代替.具有英语区域设置的网络浏览器。

如果您现在确实需要使用type="number"属性，则可以使用edittype: "custom"。例如，您可以在the answer中找到包含示例的演示。

最后我想提一下，我上次看到很多关于stackoverflow的问题，看起来像功能请求或要求实现一些部分，这些部分想要在他的纪念产品中使用。我在空闲时间开发免费的jqGrid。我免费提供工作成果。我只是要求通过PayPal捐赠来促进发展（见the readme）。另一方面，我得到的捐款很少，而且大多数开发人员更喜欢使用开发结果。真遗憾。人们至少可以与其他人分享他的回报（以代码片段的形式）。 Stackoverflow和GiHub不是sombody免费提供工作的地方。一个人可以给你一些提示，但你仍然需要自己充分利用这些工作。

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

示例http://jsfiddle.net/OlegKi/kvtrtzc5/2/在我的谷歌浏览器中运行良好，但它可能无法正常用于其他输入数据或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/使用德语区域设置来显示数据。如果您在谷歌浏览器中使用德语GUI语言（必须重新启动谷歌Chrome进程，更好地注销并从系统登录），则用户将看到,作为小数点分隔符。

Web应用程序中仍然没有灵活性来选择input元素的语言环境。结果仅取决于Web浏览器设置，无法在JavaScript应用程序中指定。

如何在free-jqgrid中允许输入html5号码

1 个答案: