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

Question

我最近发布了这个问题:jqgrid编辑表单autocomplete ="off"默认情况下,如何更改为autocomplete ="on"因为我注意到默认情况下jqGrid编辑表单给了所有输入元素autocomplete="off"属性.我认为这就是为什么Web浏览器不会为jqGrid编辑表单实现通常的自动填充功能的原因.修复此问题并使所有输入元素具有autocomplete="on"属性后,仍然没有jqGrid编辑表单的自动填充.

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

为了清楚起见,我不是在谈论jQueryautocomplete().我说的是自动填充功能内置的现代网络浏览器(Chrome,FF).

例如请到我的jsfiddle例子的形式在这里.您可以使用您想要的任何内容填写表单,然后单击submit.刷新页面并重新填写.您的浏览器应该记住并建议第一次填写的值.这就是我发生的事情.

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

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

谢谢!

Answer 1

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

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

以JSFiddle的修改版本为例。

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

*注：以上示例在 Chrome、Safari 和 Firefox 上进行了测试。您的里程可能会有所不同。

为了完整起见，以下是相关代码：

$('#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();
    });

我希望这有帮助！