问题 HTML输入自动完成


我有一个包含一些输入字段的页面。此页面中的数据将发送到服务器,而不使用表单提交。我有一个JavaScript来收集数据,创建一个JSON并使用Ajax调用将其发送到服务器。

在这种情况下的问题是浏览器不保存数据以便在用户填写相同表单时下次提供自动完成。

有什么办法可以避免这个吗?我需要一种方法来提供自动完成功能!任何诡计?


11602
2018-04-21 08:28


起源

希望这能帮助你 stackoverflow.com/questions/15462991/... - Midhun Murali
您可能需要稍微详细说明这个问题。您是希望每个用户下次再次查看相同的数据,还是希望所有用户都在自动完成中查看相同的数据。根据答案,anhnv或MuppetGrinder的答案可能是最好的。 - JLo
我指的是浏览器自动完成机制。当用户返回表单时,浏览器在双击或开始在输入字段上键入时,会显示您在该字段上输入的所有值(我认为在某些浏览器中称为表单历史记录,如Firefox) - Zelter Ady
这意味着您希望用户只看到他们之前输入的内容,并且您不希望他们看到其他用户可能输入的内容? - JLo
究竟。仅在表单的该字段上键入一次的值。是浏览器自动完成功能。但这只有在提交表单时才有效。 - Zelter Ady


答案:


我使用html5浏览器存储来处理这些事情。有一个非常好的介绍 这里 这允许大多数现代浏览器在客户端上的数据持久性。您可以使用它来捕获表单数据并根据需要重新呈现它。


4
2018-04-21 09:39





你可以尝试这个:使用jQuery自动完成

function DefaultCtrl($scope) {
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
}

angular.module('MyModule', []).directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
});
<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        <input auto-complete ui-items="names" ng-model="selected">
        selected = {{selected}}
    </div>
</div>

http://jsfiddle.net/sebmade/swfjT/

希望这对你有所帮助!


2
2018-04-21 09:45



除非我遗漏了某些内容,否则在OP的问题中没有提到Angular,这个答案似乎依赖于OP未提及使用的工具。 - Roy


你有没有尝试过的方法? 触发自动填充而不提交表单。这对我有用。

基本上触发单击表单的提交按钮并获取表单以在隐藏的iframe中打开空白页面。它显然是一个黑客,但它实际上点击表单提交按钮,提交表单并打开一个新页面,所以它自然适用于我签入的每个浏览器。

在这里引用示例标记:

<iframe id="remember" name="remember" class="hidden" src="/content/blank">    
</iframe>

<form target="remember" method="post" action="/content/blank">

  <fieldset>
    <label for="username">Username</label>
    <input type="text" name="username" id="username" value="">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" value="">
  </fieldset>

  <button id="submit-button" type="submit" class="hidden"></button>

</form>

然后触发提交 $("#submit-button").click() 通过ajax处理表单时。


2
2018-04-21 08:35





当附加了实际表单并且实际触发了其提交事件时(即使数据是由AJAX发送的),我发现自动完成功能正常工作。我建议使用带有提交按钮的表单,并通过Javascript拦截提交(附加到表单的 onsubmit 事件)以防止它并通过AJAX执行。

使用正确的HTML表单并阻止提交,而不是仅仅使用输入字段,也可以激活您的 onsubmit 用户按Enter键时的处理程序。我发现作为用户非常有用。


1
2018-04-21 08:32



默认值为 autocomplete 是 on。所以,我不认为这会有所作为。 - Vigneswaran Marimuthu
你是对的。 自动完成 当你想要禁用它时,它作为“关闭”属性更有用。更新了我的答案。 - Sidd