以编程方式添加到 Firefox 和 Edge 中的自动完成功能不起作用

Question

我想通过附加到 'button' 输入元素的函数，以编程方式在 JavaScript（不是 jQuery）中将文本输入值添加到浏览器的自动完成数据存储中。下面的代码在一段时间内都运行良好，现在（可能有一段时间，只是没有人注意到）在 Firefox 和 Edge 中停止工作。

function addToAutoComplete(inputElementId) {

    // Get a reference to the input element whose name/value
    // we want added to the browser's autocomplete data
    var inputEl = document.getElementById(inputElementId);

    // Create an iframe window, and append to the document body (temporarily)
    var iFrameEl = document.createElement('iframe');
    iFrameEl.id = 'iFrameEl';
    iFrameEl.src = 'about:blank';
    document.body.appendChild(iFrameEl);

    // Create a form element 
    var frameForm = document.createElement('form');
    frameForm.id = 'FormEl';
    frameForm.method = "post";
    frameForm.autocomplete = "on";

    // Append the form element inside the iframe body
    var iFrameWindow = iFrameEl.contentWindow;
    iFrameWindow.document.body.appendChild(frameForm);

    // Append a clone of the input element to the form element
    frameForm.appendChild(inputEl.cloneNode(true));

    // Submit the form in the iframe, so that the input element value 
    // is stored in the browser's autocomplete data
    frameForm.onsubmit = null;
    frameForm.submit();

    // Remove the temporary iframe 
    document.body.removeChild(iFrameEl);
}

这在 Chrome 中工作正常。我做错了什么？

Answer 1

您没有发布 HTML 代码，所以我不确定您是否在代码中使用了 autocomplete="on" 属性。

我建议您在您的文本框中添加 autocomplete="on"，并在您的表单中添加，如下所示。它使其适用于 MS Edge 和 Firefox。

<!doctype html>
<html>
<head>
<script>
function addToAutoComplete() {

    // Get a reference to the input element whose name/value
    // we want added to the browser's autocomplete data
    var inputEl = document.getElementById("txt1");

    // Create an iframe window, and append to the document body (temporarily)
    var iFrameEl = document.createElement('iframe');
    iFrameEl.id = 'iFrameEl';
    iFrameEl.src = 'about:blank';
    document.body.appendChild(iFrameEl);

    // Create a form element 
    var frameForm = document.createElement('form');
    frameForm.id = 'FormEl';
    frameForm.method = "post";
    frameForm.autocomplete = "on";

    // Append the form element inside the iframe body
    var iFrameWindow = iFrameEl.contentWindow;
    iFrameWindow.document.body.appendChild(frameForm);

    // Append a clone of the input element to the form element
    frameForm.appendChild(inputEl.cloneNode(true));

    // Submit the form in the iframe, so that the input element value 
    // is stored in the browser's autocomplete data
    frameForm.onsubmit = null;
    frameForm.submit();

    // Remove the temporary iframe 
    document.body.removeChild(iFrameEl);

}
</script>
</head>
<body>
<form  autocomplete="on">
<label for="txt1">Add Value :</label> <input type="text" id="txt1" name="txt1" value="" autocomplete="on" ><br>
<input type="submit" onclick="addToAutoComplete()">
</form>
</body>
</html>

MS Edge 浏览器中的输出：

Firefox 中的输出：

以编程方式添加到 Firefox 和 Edge 中的自动完成功能不起作用

Programmatically adding to autocomplete in Firefox and Edge not working

javascript

firefox

autocomplete

microsoft-edge