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

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 上进行了测试。您的里程数可能会有所不同。

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

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

我希望这会有所帮助！

Answer 2

虽然有一些代码可以准确地从您的问题中查看。我将跳转到一个假设，即由于浏览器限制，这完全有可能，具体取决于浏览器。但是也。这可能是几件事之一。要么您的表单元素未包含在 <form></form> 标记中，因此启用了自动完成功能的浏览器无法获取您想要启用自动完成功能的元素。

2 你为你的元素使用了不起眼的名字。通常启用自动完成功能的浏览器会查找常用的表单元素名称，例如：first_name、firstname、name、email、username、street1、street_one.. 等等。

3 如果您通过 javascript 在类似功能的文档上动态加载网格，则完全有可能。自动完成功能已经检查了页面上是否有任何表格可以自动完成。在这种情况下，浏览器自动完成功能可能只是在您的文档准备好之前运行。如果事实证明是这样的话..这个帖子可能会帮助你走上正确的道路

jQuery AutoComplete Trigger Change Event