JavaScript 输入

引言

应用程序必须吸引用户并易于使用，才能从用户那里收集信息。JavaScript 最强大的功能是它能够接收用户输入并在浏览器中对其进行处理。因此，谨慎的程序员会花时间熟练掌握读取用户输入并在使用时应用适当的语法。无论您是创建简单的表单验证脚本还是依赖用户交互的复杂在线应用程序，学习如何接受用户输入在 JavaScript 中都至关重要。

如何在 JavaScript 中检索用户的响应？

JavaScript 提供了几种全局技术来收集用户数据。例如，当您使用 window.prompt() 函数时，会弹出一个模态对话框，要求用户输入以供您的 JavaScript 代码使用。prompt() 函数旨在处理短字符串数据，例如名字和姓氏。如果数据复杂或包含大块文本，请使用 HTML 表单。当需要少量数据才能转到另一个页面或执行需要该数据的操作时，它效果很好。

• 可选的 text 参数告诉对话框要显示什么文本。
• 另一个可选参数是 defaultText，用于设置默认输入文本。

以下是询问用户姓名的 JavaScript 代码示例

prompt 对话框包含“取消”和“确定”按钮。当您单击“取消”时，您将获得 null；当您单击“确定”时，您将获得当前（默认或用户提供）的输入值。

在处理非 null 值之前，程序员可以验证它是否已被接收。以下代码使用 JavaScript 显示欢迎消息，并验证值是否不为 null

虽然可以使用 window 对象 window.prompt() 来启动此过程，但由于它是默认的全局命名空间，因此并非必需。

JavaScript 中的确认对话框

如果只需要用户确认，请使用确认对话框。它是一种无需复杂编码逻辑即可快速获取确认的方法。confirm() 方法在对话框中显示一个“确定”按钮、“取消”按钮和一条消息

confirm() 函数接受的唯一参数是可能出现在确认框中的可选消息。

消息中也可能存在换行符

单击“确定”会使 confirm() 函数返回 true，而选择“取消”会返回 false。

这是一段使用 confirm() 函数检查用户是否要继续删除该值并相应更新消息的代码

JavaScript 输入的类型

文本输入

文本输入字段通常用于输入单行文本信息，例如姓名、电子邮件地址或消息。它们是通过将 type 属性设置为 "text" 的 '<input>' 元素来创建的。

数字输入

数字类型的输入控件将输入限制为数字，因此可用于提供年龄、数量或价格等数字数据。这是通过使用 type 属性设置为 'number' 的 '<input>' 元素实现的。

文本区域输入

文本区域输入字段允许用户输入多行文本，这使得它们适用于输入多行消息或评论。使用 '<textarea>' 元素对表单进行编码。

复选框输入

当用户需要做出二元选择时（例如，选择偏好设置或条款和条件），复选框是最合适的输入类型。它们直接使用 '<input>' 元素创建，其 'type' 属性为 "checkbox"。

单选按钮输入

对于单选按钮输入，当用户想从多个选项中选择一个时，会显示单选按钮字段，这些选项通常不允许同时选择。这些选项是使用 'radio' 属性和 type 属性设置为 "radio" 来创建的，如下所示

处理 JavaScript 输入的方法

• 事件处理
  JavaScript 处理各种事件处理程序，例如 'onclick'、'onchange'、'oninput' 等，这些处理程序会捕获用户与输入字段的交互。然后，这些函数可以用于在特定事件发生后执行操作，例如，如果用户单击按钮或在文本字段中键入任何内容。
• DOM 操作
  文档对象模型 (DOM) 是 JavaScript 能够动态访问和操作 HTML 元素的关键。可以使用 'getElementById'、'getElementsByClassName' 或 'querySelector' 等方法来访问输入区域并根据需要更改值。
• 表单提交
  表单数据在各种 JavaScript 输入表单中填写，然后发送到服务器进行进一步处理。这可以通过操作表单元素并搜索其属性（如 'submit()'）以编程方式提交表单来完成。

JavaScript 中的输入验证

对用户提供的数据进行验证是确保准确性、安全性和数据符合标准的最重要方面之一。JavaScript 提供了几种验证输入数据的方法

• 客户端验证
  JavaScript 用于客户端验证，在将输入数据发送到服务器之前对其进行验证。此需求可能表现为验证空字段、验证电子邮件地址、强制密码复杂性等。
• 正则表达式
  正则表达式 (regex) 是具有出色匹配和字符串验证功能的字符串模式。它们可以作为强制特定输入数据格式以及验证电子邮件地址、电话号码和邮政编码的工具。
• 条件验证
  条件验证意味着根据条件或指令来验证数据。例如，某些字段可能要求在满足特定条件时进行验证，或者验证规则可能根据用户输入的信息而有所不同。

在 JavaScript 中使用文本输入控件

在 JavaScript 强大的客户端处理功能得到越来越多的利用之前，文本框、复选框、单选按钮和下拉菜单是 HTML 表单的原始组件，用于收集用户输入并将其发送到服务器进行处理。现在，表单控件已被提取出来，用于在页面内进行处理。例如，许多网站都提供转换工具，例如 ninjaunits.com 上的工具，可以将像素转换为 rem。

您会发现这里没有提交按钮。keyup 事件用于读取用户输入，并即时更新 Rem 字段中的结果。稍长的延迟（或防抖）允许用户输入值，并避免重复调用计算引擎。

我们可以以类似的方式使用几个文本输入框（名字和姓氏）来获取访客的姓名

使用 RxJS 等 JS 库可以大大简化防抖过程。RxJS 通常与 Angular 和 ReactJS 等框架相关联；但是，可以通过 CDN 将其添加到任何 HTML 网站。

以下代码使用 fname 和 lname 输入字段来构建输入流，然后对其进行合并，并添加半秒钟的防抖。接收事件后，subscribe() 函数会记录任一输入字段的最新值并修改消息

输出

与 ninjaunits.com 网站类似，处理可能会在用户输入完整姓名之前发生，导致输入的部分姓名。

当然，在用户键入完成之前，消息将每半秒刷新一次，届时将显示完整姓名。

如果您不想处理不完整的姓名，还有其他方法。最简单的方法是挂钩到最后一个姓名输入的 onblur 或 onchange 事件，而不是 onkeyup 事件。另一种更复杂的方法是在短暂的活动暂停后（例如两到三秒）显示消息。

结论

JavaScript 输入对于 Web 开发至关重要，因为它有助于向用户呈现 Web 应用程序，并为开发人员提供一种有效收集、验证和处理用户数据的机会。通过学习各种输入类型（inputs）、输入处理技术（handling input）、验证技术（validation techniques）和安全问题（security considerations），Web 开发人员可以创建更健壮、更安全且用户体验流畅的应用程序。