使用 JavaScript 更新元素中的输入值

本文档旨在指导开发者如何使用 JavaScript 动态更新 HTML 元素中的输入值，并提供两种实现方法：直接更新和利用表单。此外，还介绍了如何使用 LocalStorage 持久化存储消息，以便在页面刷新后保留数据。

方法一：直接更新元素

这种方法直接获取输入元素的值，并在点击事件发生时，将这些值添加到新的元素中。

HTML 结构：

  

  

    
    
    Submit
    Reset
  

CSS 样式：

立即学习“Java免费学习笔记（深入）”；

BizPower CRM客户管理系统

通过使用BizPower CRM解决方案，您的员工、生产过程及信息能够与客户保持着平稳、无间断的联络，并且能够通过以客户为焦点、创新的产品和服务；以客户为中心，更高层次的生产过程；持久有益的客户关系这三个方面创造有价值客户的领导关系。选择Bizpower CRM的原因1、灵活的数据权限和功能权限BizPower CRM 系统通过引入了灵活的数据权限和功能权限，模仿现实中协同工作的实际情况。 实现企

下载

html, body {
  padding: 0;
  margin: 0;
}

.msg {
  padding: 2em;
  margin: 2em;
  border-radius: 2vh;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: left;
  flex-direction: column;
  background-color: #1e90ff;
}

.items {
  height: 65vh;
  overflow: scroll;
  color: white;
  width: 100%;
  overflow-x: hidden;
  margin: 10px;
}

input {
  padding: 10px;
  border: none;
  border-radius: 8px;
  outline: none;
  font-size: 1em;
}

#button {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-size: 1em;
}

.button {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-size: 1em;
}

.message-item {
  background-color: black;
  padding: 1em;
  border-radius: 8px;
  margin: 3px;
}

JavaScript 代码：

const
  name = document.querySelector('.name'),
  message = document.querySelector('.message'),
  btn = document.getElementById('button'),
  div = document.querySelector('.items');

const handleAdd = (e) => {
  div.insertAdjacentHTML('beforeend', `
    

      
${name.value}
      
${message.value}
    
  `);
  name.value = '';    // Clear name
  message.value = ''; // Clear message
};

btn.addEventListener('click', handleAdd);

代码解释：

1. 首先，获取需要的 DOM 元素：name 输入框，message 输入框，button 按钮，以及 items 容器。
2. handleAdd 函数：
   • 使用 insertAdjacentHTML 方法在 items 容器的末尾插入一个新的 div 元素，该元素包含 name 和 message 的值。
   • 清空 name 和 message 输入框的值，以便用户输入新的内容。
3. 为 button 按钮添加点击事件监听器，当点击按钮时，执行 handleAdd 函数。

注意事项：

• 确保在 JavaScript 代码中正确获取了 DOM 元素。
• 使用 insertAdjacentHTML 方法可以方便地插入 HTML 代码。
• 在添加完元素后，清空输入框的值，可以提高用户体验。

方法二：使用表单

使用表单可以更好地利用浏览器提供的功能，例如表单验证、提交和重置。

HTML 结构：

  

  

    
    
    Submit
    Reset
  

CSS 样式：

立即学习“Java免费学习笔记（深入）”；

html, body {
  padding: 0;
  margin: 0;
}

.msg {
  padding: 2em;
  margin: 2em;
  border-radius: 2vh;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: left;
  flex-direction: column;
  background-color: #1e90ff;
}

.items {
  height: 65vh;
  overflow: scroll;
  color: white;
  width: 100%;
  overflow-x: hidden;
  margin: 10px;
}

input {
  padding: 10px;
  border: none;
  border-radius: 8px;
  outline: none;
  font-size: 1em;
}

.form-btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-size: 1em;
}

.message-item {
  background-color: black;
  padding: 1em;
  border-radius: 8px;
  margin: 3px;
}

JavaScript 代码：

const handleAdd = (e) => {
  e.preventDefault(); // Prevent page from navigating
  const
    form = e.target,
    formElements = form.elements,
    parent = form.closest('.msg'),
    items = parent.querySelector('.items');
  items.insertAdjacentHTML('beforeend', `
    

      
${formElements.name.value}
      
${formElements.message.value}
    
  `);
  formElements.name.value = '';    // Clear name
  formElements.message.value = ''; // Clear message
  formElements.name.focus();
};

document.forms.namedItem('new-msg')
  .addEventListener('submit', handleAdd);

代码解释：

1. handleAdd 函数：
   • e.preventDefault() 阻止表单的默认提交行为，防止页面刷新。
   • 获取表单元素：form，formElements，parent，items。
   • 使用 insertAdjacentHTML 方法在 items 容器的末尾插入一个新的 div 元素，该元素包含 name 和 message 的值。
   • 清空 name 和 message 输入框的值。
   • 使用 formElements.name.focus() 将焦点设置到 name 输入框，方便用户继续输入。
2. 使用 document.forms.namedItem('new-msg') 获取名为 new-msg 的表单，并为其添加 submit 事件监听器，当表单提交时，执行 handleAdd 函数。

注意事项：

• 使用表单可以利用浏览器提供的验证功能，例如 required 属性。
• e.preventDefault() 阻止表单的默认提交行为非常重要。
• 使用 formElements.name.focus() 可以提高用户体验。

方法三：使用 LocalStorage 持久化存储

如果需要在页面刷新后保留消息，可以使用 LocalStorage。

JavaScript 代码：

const MESSAGES_KEY = "messages";

const main = () => {
  // Restore all messages
  const messageContainer = document.querySelector(".items");
  __retrieveAllMessages().forEach((message) => {
    insertMessage(message, messageContainer);
  });
  // Add event listener
  document.forms.namedItem("new-msg").addEventListener("submit", handleAdd);
};

const saveMessage = (message) => {
  __saveAllMessages(__retrieveAllMessages().concat(message));
};

const insertMessage = (message, container) => {
  container.insertAdjacentHTML("beforeend", messageToHtml(message));
};

const messageToHtml = ({ name, message }) => `
  

    
${name}
    
${message}
  
`;

const handleAdd = (e) => {
  e.preventDefault(); // Prevent page from navigating
  const form = e.target,
    message = {
      name: form.elements.name.value,
      message: form.elements.message.value,
    };
  saveMessage(message);
  insertMessage(message, form.closest(".msg").querySelector(".items"));
  form.elements.name.value = ""; // Clear name
  form.elements.message.value = ""; // Clear message
  form.elements.name.focus();
};

const __retrieveAllMessages = () => {
  return JSON.parse(localStorage.getItem(MESSAGES_KEY) ?? "[]");
};

const __saveAllMessages = (messages = []) => {
  return localStorage.setItem(MESSAGES_KEY, JSON.stringify(messages));
};

main();

代码解释：

1. MESSAGES_KEY 定义了 LocalStorage 中存储消息的键名。
2. main 函数：
   • 在页面加载时，从 LocalStorage 中恢复所有消息，并将其添加到 items 容器中。
   • 为表单添加 submit 事件监听器。
3. saveMessage 函数：将新的消息添加到 LocalStorage 中。
4. insertMessage 函数：将消息添加到 items 容器中。
5. messageToHtml 函数：将消息对象转换为 HTML 字符串。
6. handleAdd 函数：
   • 阻止表单的默认提交行为。
   • 获取表单元素的值，并创建一个消息对象。
   • 将消息保存到 LocalStorage 中。
   • 将消息添加到 items 容器中。
   • 清空输入框的值，并将焦点设置到 name 输入框。
7. __retrieveAllMessages 函数：从 LocalStorage 中获取所有消息。
8. __saveAllMessages 函数：将所有消息保存到 LocalStorage 中。

注意事项：

• LocalStorage 存储的数据是字符串，因此需要使用 JSON.stringify 和 JSON.parse 方法进行转换。
• LocalStorage 存储的数据大小有限制，一般为 5MB。
• LocalStorage 存储的数据是持久化的，即使关闭浏览器，数据仍然存在。

总结：

本文档介绍了三种使用 JavaScript 更新 HTML 元素中输入值的方法，并提供了详细的代码示例和解释。开发者可以根据自己的需求选择合适的方法。使用表单可以更好地利用浏览器提供的功能，而使用 LocalStorage 可以持久化存储数据。