使用 JavaScript 更新输入值到元素_技术教程

本文档旨在指导开发者如何使用 JavaScript 将输入框中的值动态更新到页面元素中，并提供代码示例和最佳实践。我们将探讨如何获取输入值、创建和更新元素，以及如何利用表单和本地存储优化用户体验。

动态更新元素内容

在网页开发中，经常需要根据用户的输入动态更新页面上的元素。以下是一个基础示例，演示了如何实现这一功能：

HTML 结构:

CSS 样式:

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
  nameInput = document.querySelector('.name'),
  messageInput = document.querySelector('.message'),
  btn = document.getElementById('button'),
  div = document.querySelector('.items');

const handleAdd = (e) => {
  div.insertAdjacentHTML('beforeend', `
    
      ${nameInput.value}
      ${messageInput.value}
    
  `);
  nameInput.value = '';    // Clear name
  messageInput.value = ''; // Clear message
};

btn.addEventListener('click', handleAdd);

代码解释:

首先，我们获取了需要操作的 DOM 元素，包括输入框（.name 和 .message）、按钮（#button）以及用于显示内容的容器（.items）。
handleAdd 函数负责创建新的 div 元素，并将输入框中的 name 和 message 值插入到新元素中。
insertAdjacentHTML('beforeend', ...) 方法将新创建的 HTML 插入到 .items 容器的末尾。
最后，清空输入框的值，以便用户可以输入新的内容。

注意事项:

确保正确选择 DOM 元素。使用 querySelector 或 getElementById 时，要确保选择器与 HTML 结构匹配。
在插入 HTML 字符串时，注意转义特殊字符，防止 XSS 攻击。
及时清理输入框，提供更好的用户体验。

使用表单优化体验

使用表单可以利用浏览器内置的功能，例如表单验证、提交和重置。这可以简化代码并提高用户体验。

HTML 结构:

CSS 样式 (与上一个示例相同)

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

代码解释:

通过 document.forms.namedItem('new-msg') 获取表单元素，并监听 submit 事件。
e.preventDefault() 阻止表单的默认提交行为，防止页面刷新。
通过 form.elements.name.value 和 form.elements.message.value 获取输入框的值。
formElements.name.focus() 将焦点设置回 name 输入框，方便用户继续输入。

优点:

利用表单的 required 属性进行简单的客户端验证。
支持键盘 Enter 键提交表单。
使用 reset 按钮可以方便地清空表单。

使用 LocalStorage 持久化数据

如果需要保存用户输入的数据，可以使用 localStorage。以下是一个示例，演示了如何使用 localStorage 保存和恢复消息：

HTML 结构和 CSS 样式 (与上一个示例相同)

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();

代码解释:

MESSAGES_KEY 定义了用于存储消息的 localStorage 键。
main 函数在页面加载时执行，从 localStorage 中恢复所有消息，并添加到页面上。
saveMessage 函数将新的消息添加到 localStorage 中。
__retrieveAllMessages 和 __saveAllMessages 函数负责从 localStorage 中读取和写入消息数据。注意使用了 JSON.parse 和 JSON.stringify 进行序列化和反序列化。
handleAdd 函数与之前的示例类似，但现在会将消息保存到 localStorage 中。

注意事项: