Question

关于浏览器建议的输入

例如当用户在

中输入“ John”时

<form>
<input type="text" name="firstName"/>
</form>

并提交表单，然后当他们重新访问该页面时，“ John”将是此字段的建议输入。

问题

我试图利用chrome中的输入字段建议，但我不希望页面重新加载。我有一个单页应用程序，它将记录表单提交并将其存储在全局状态中。

在form元素的commit回调上使用event.preventDefault可以阻止重新加载页面，但也可以防止记录新建议。

那么如何触发浏览器以保存用户输入而无需刷新？

Answer 1

您可以使用HTML5 datalist或/和localstorage轻松管理自动填充行为。

<label for="nameList">Names</label>
<input type="text" name="name" id="nameList" list="names">
<datalist id="names">
  <option value="John">
  <option value="Mickey">
  <option value="Donald">
</datalist>

如果要为每个用户更新字段或执行自定义数据列表，则可以使用localstorage来存储列表。这里是一个例子：

<label for="nameList">Names</label>
<input type="text" name="name" id="nameList" list="names">
<datalist id="names">
</datalist>
  <button id="click">click</button>
</body>
  <script>
    var names = [];
document.addEventListener('DOMContentLoaded', function(){

  if(localStorage.getItem("names")){
    names = JSON.parse(localStorage.getItem("names"));//<-- names already stored    
  }
  var datalist = document.getElementById("names")
  var options = "";
  names.map(o=>{
    options += '<option value="'+o+'" />';//<-- build custom datalist
  })

  datalist.innerHTML = options; 

}, false);

var frm = document.getElementById("click");
frm.addEventListener("click", function(){
  names.push(document.getElementById("nameList").value);//<-- set new names
  localStorage.setItem("names",JSON.stringify(names));  

});
  </script>

不使用event.preventDefault阻止html5表单提交

关于浏览器建议的输入

问题

1 个答案: