不使用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>