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

Question

关于浏览器建议的输入

例如当用户在

中输入“John”时

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

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

问题

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

在表单元素的提交回调上使用 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>

如果您想更新字段或为每个用户执行自定义数据列表，您可以使用本地存储来存储列表。这是一个例子:

<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>