Question

我最近发布了这个问题：jqgrid edit form autocomplete="off" by default, how to change to autocomplete="on"因为我注意到默认情况下，jqGrid编辑表单为所有输入元素提供了autocomplete="off"属性。我认为这就是为什么Web浏览器不会为jqGrid编辑表单实现通常的自动填充功能的原因。修复此问题并使所有输入元素具有autocomplete="on"属性后，仍然没有自动填充jqGrid编辑表单。

有谁知道为什么自动填充不适用于这些表单？表格是通过ajax提交的，所以我不确定这是否会影响它。

为了清楚起见，我不谈论jQuery's autocomplete()。我说的是自动填充功能内置的现代网络浏览器（Chrome，FF）。

例如，请转到我的jsfiddle示例表单here。您可以使用任何内容填写表单，然后单击submit。刷新页面并重新填写。您的浏览器应该首次记住并建议刚刚填写的值。这就是我的想法。

另一方面，如果你转到jqGrid编辑示例here。选择一行，然后单击小编辑按钮（看起来像铅笔）。您无法更改第一个字段，但可以更改其他字段。在其他字段中输入您想要的任何内容，然后单击submit。再次尝试刷新页面。我在许多计算机以及FF和Chrome中遇到的情况是，此表单不记得过去的任何条目。

这是问题，你遇到同样的事情吗？如果是这样，您知道是否可以使这些jqGrid表单与浏览器的自动填充功能兼容？

谢谢！

Answer 1

虽然所有浏览器都以稍微不同的方式处理表单字段的存储和自动填充，但它们都依赖于提交的表单来存储表单字段本身的值。由于jqGrid通过AJAX处理表单（更新按钮是链接而不是提交按钮），表单本身从未实际提交，这反过来决不允许浏览器存储字段值以供以后通过自动完成使用。

强制浏览器存储字段值的一种方法是创建<iframe />，克隆<form />，将克隆的<form />附加到<iframe />并提交它是AJAX表单提交过程的一部分。

以JSFiddle。

的此修改版本为例

在上面的示例中，填写“标准表单”并提交，重新加载页面，字段按预期自动完成。填写'AJAX表'并提交，重新加载页面，字段不会自动完成。最后，填写“AJAX + iFrame表单”并提交，重新加载页面，现在字段应自动完成。

*注意：上述示例已在Chrome，Safari和Firefox上进行了测试。您的Milage可能会有所不同。

为了完整性，这里是相关代码：

$('#iframe_submit').bind('submit', function(e){
    e.preventDefault(); // Prevents Standard Submit

    // Do AJAX Stuff Here...   

    // Create Clone of Form, Append to iFrame and Trigger Submit
    // This Forces Autocomplete to Register

    var $clone = $('#iframe_submit').clone();
        $clone.attr('id', 'iframe_clone'); // Only One ID Allowed

        $('<iframe />').appendTo('body').contents().find('body').append($clone);
        $('iframe').contents().find('#iframe_clone').submit();
    });

我希望这有帮助！

jqgrid编辑表单丢失浏览器自动填充功能

1 个答案: