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

Question

关于浏览器建议的输入

例如，当用户在其中输入“ John”

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

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

问题

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

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

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

Answer 1

您可以使用HTML5 数据列表或/和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>