本文档旨在指导开发者如何使用 JavaScript 将输入框中的值动态更新到页面元素中，并提供代码示例和最佳实践。我们将探讨如何获取输入值、创建和更新元素，以及如何利用表单和本地存储优化用户体验。
动态更新元素内容
在网页开发中，经常需要根据用户的输入动态更新页面上的元素。以下是一个基础示例，演示了如何实现这一功能：
HTML 结构:
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;
}
#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 = ''; // 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 样式 (与上一个示例相同)
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
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 = ''; // 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 }) => `
`;
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 中。
注意事项:
- localStorage 只能存储字符串数据，因此需要使用 JSON.stringify 和 JSON.parse 对复杂数据结构进行序列化和反序列化。
- localStorage 的存储空间有限，不适合存储大量数据。
总结
本文档介绍了如何使用 JavaScript 将输入值动态更新到页面元素中，并提供了多种方法来优化用户体验。通过合理使用表单和 localStorage，可以创建更强大、更友好的 Web 应用程序。记住，代码的可读性和维护性同样重要，编写清晰、简洁的代码是每个开发者的责任。
