迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

在 JavaScript 中获取用户输入

作者:迹忆客 最近更新:2023/03/10 浏览次数:

本文将帮助你了解如何在 JavaScript 中获取用户输入。

有两种方法可以在 JavaScript 中获取用户输入,具体取决于你是要从浏览器还是 NodeJS 输入。本指南将帮助你学习两者。

要要求来自浏览器的用户输入,你必须使用浏览器提供的 prompt() 方法。该方法允许你接受用户输入作为字符串并将其存储在变量中,如下所示:

const input = prompt();

此方法还接受一个字符串作为附加信息,以了解应用程序需要什么输入。

例如,提示输入用户名的以下代码如下所示:

const input = prompt("What's your name?");
alert(`Your name is ${input}`);

alert() 方法显示结果。你可以根据你的要求将行文本设置为问题或提示。

要接受来自 NodeJS 控制台的用户输入,你必须使用提供的 readline 模块。

你可以从模块中使用以下命令,例如 require(),如下所示:

const readline = require("readline");

然后你需要实例化附加到输入流的接口。使用 readline.createInterface() 方法创建接口并将输入和输出参数作为对象参数传递。

编写输入和输出需要将输入写入 process.stdin 并输出到 process.stdout

这是创建 readline 接口的示例。

const readline = require("readline");

const ql = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

必须在上面代码中分配给 q1 变量的接口实例上调用 question() 方法以请求用户输入。

question() 方法有两个参数。

你可以跳过参数对象并将回调函数作为第二个参数传递。

最后,你可以通过在回调函数中调用 q1.close() 方法来关闭 q1 接口。

arr.js

const readline = require("readline");

const q1 = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

q1.question("Where do you live? ", function (answer) {
  console.log(`Oh, so you live in ${answer}`);
  console.log("Interface Closed");
  q1.close();
});

首先,你需要使用 NPM 或 Yarn 安装 prompt-sync 模块,如下所示:

npm install prompt-sync
or
yarn add prompt-sync

然后,你需要 require()prompt-sync 模块。

看看下面的代码。

pm.js

const prompt = require("prompt-sync")();
const input = prompt("Where do you live? ");

console.log(`Oh, so you live in ${input}`);

因为此方法是同步的,所以 Node 实例在执行下一行之前等待输入。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便