从键盘到屏幕：详解 JavaScript 获取输入9

在 Web 开发中，交互是关键。我们希望用户能够与我们的应用程序互动，输入数据并收到反馈。JavaScript 为我们提供了强大的工具来从用户那里获取输入，无论是来自键盘、鼠标还是设备上的其他控件。

从 元素获取值

最常见的方式是从 <input> 元素获取值。这些元素用于收集各种类型的用户输入，包括文本、数字、复选框和下拉列表。要获取 <input> 元素的值，我们可以使用 value 属性。
const inputElement = ('input');
const value = ;

使用事件监听器响应输入

当用户更改 <input> 元素的值时，我们可以使用事件监听器来响应。这使我们能够在输入发生时触发特定的代码。有几种不同的事件监听器可用于此目的，包括 input、change 和 keydown。
('input', (event) => {
// 在用户键入时触发
});
('change', (event) => {
// 在用户离开输入域时触发
});
('keydown', (event) => {
// 在用户按下键盘按键时触发
});

获取选中的复选框和单选按钮

对于 <input type="checkbox"> 和 <input type="radio"> 元素，我们可以使用 checked 属性来检查它们是否被选中。
const checkboxElement = ('input[type="checkbox"]');
const isChecked = ;

从下拉列表获取值

对于 <select> 元素，我们可以使用 selectedIndex 属性来获取当前选中的选项的索引。我们还可以使用 value 属性来获取选定选项的值。
const selectElement = ('select');
const selectedIndex = ;
const selectedValue = ;

使用键盘快捷键

JavaScript 还允许我们使用键盘快捷键来触发操作。这可以通过使用 keydown 和 keyup 事件监听器来实现。这些事件监听器允许我们在用户按下或松开特定键盘按键时侦听。
('keydown', (event) => {
if ( === 'Enter') {
// 回车键被按下时触发
}
});
('keyup', (event) => {
if ( === 'Escape') {
// Esc 键被松开时触发
}
});

从其他控件获取输入

除了 <input> 元素外，JavaScript 还允许我们从其他控件获取输入，例如按钮、链接和文本区域。我们可以使用 addEventListener 方法为这些控件附加事件监听器，并在用户与它们交互时触发特定的代码。
const buttonElement = ('button');
('click', (event) => {
// 在用户单击按钮时触发
});
const linkElement = ('a');
('click', (event) => {
// 在用户单击链接时触发
});
const textAreaElement = ('textarea');
('input', (event) => {
// 在用户键入文本区域时触发
});

最佳实践* 始终对用户输入进行验证，以确保它有效。
* 使用事件委托来提高性能并减少事件处理程序的数量。
* 提供清晰的输入指示，以指导用户如何使用输入元素。
* 考虑使用辅助技术，例如屏幕阅读器，以确保所有用户都可以访问您的应用程序。

2025-02-02

上一篇：JavaScript JSON 参数

下一篇：JavaScript 函数嵌套的深入指南