autocomplete="on" 不会将值插入 value="my value"

【问题标题】：autocomplete="on" does not insert value into value="my value"autocomplete="on" 不会将值插入 value="my value"
【发布时间】：2021-02-09 03:01:00
【问题描述】：

我有一个带有标签的输入字段：autocomplete="on" 和 value=""。当我返回并再次访问该站点时，值在字段中，但不在 值标签 中。

我的 HTML 代码：

<div class="inputBox">
    <input type="email" name="email" autocomplete="on" onkeyup="this.setAttribute('value', this.value);" required value="">
    <label>E-Mail</label>
</div><br>

我的 CSS（我不确定你是否需要它）：

.inputBox input:focus ~ label,
.inputBox input:valid ~ label,
.inputBox input:not([value=""]) ~ label {
 /*My Style*/
}

Example Image (Right of the required is value)

请随时向我询问更多详情。

【问题讨论】：

标签： html css forms validation input

【解决方案1】：

您必须在输入或离开窗口时立即保存电子邮件字段的值。

这些值可以存储在Session Storage（当前标签页关闭时丢失）或Local Storage（即使标签页或浏览器关闭也会保留）。

一旦我们保存了我们的值，一旦用户返回页面，我们就可以使用保存的值来预填充我们的输入字段。

这可以通过下面的代码来实现

// save the field to local or session storage before navigating to other page
window.addEventListener('beforeunload', (event) => {
  localStorage["email"] = document.querySelector("input[type='email']").value;
  console.log("Value saved");
});

// apply values from the local or session storage on document load
document.addEventListener("DOMContentLoaded", (event) => {
  document.querySelector("input[type='email']").value = localStorage["email"];
  console.log("Value applied from storage");
});

Here's a working sample fiddle 基于您的代码。尝试输入电子邮件，然后刷新页面。

【讨论】：