[译]JavaScript中的prompt是什么

windjyf
1,889 阅读5分钟

简介

在JavaScript中，prompt()方法被用于展示一个提示框去提示用户进行输入。通常来讲，它用于在进入页面之前获取用户的输入。这个方法可以在不使用window前缀下编写。当提示框弹出时，我们需要去点击”确定“或者”取消“才能继续。

使用prompt()方法，它一共接收两个参数：

  1. 第一个参数是显示在文本框中的标签
  2. 第二个参数是显示在文本框中的默认字符串

提示框有两个按钮，确定和取消。这个方法将返回null或者用户输入的字符串。当用户单击”确定“时，该方法返回输入值，单击”取消“时，返回null。

描述

提示框会向用户询问一些信息。这个方法为用户输入提供了一个默认输入字段。下面这个代码向用户提问”Your species?“，这会在文本框中提供默认答案”human“。用户可以去更改输入框文本。无论他/她保持默认输入不变还是将其改为其他内容，文本框中的内容都会作为返回值。

var spec = prompt(“Your species?”, “human”);

prompt方法和alert方法非常像，但是也有两点不同之处。

  • 我们需要一种在使用prompt的时候可以捕获用户输入的方式，这意味着我们首先要声明一个后跟等号的变量。
  • 我们可以在prompt中指定第二个参数，这是显示提示时出现在输入框中的默认文本。如果用户保持默认文本并单击”确定“，则会将默认文本赋值给变量。是否返回包含默认文本这完全取决于我们自己。

我们可以先将字符串赋值给变量，然后在参数中直接使用变量即可。

  1. var question = “Your species?”;
  2. var default Answer = “human”;
  3. var spec = prompt(question, default Answer);

用户的输入返回值是一个字符串类型，即使输入的返回是一个数字，仍然会被转为一个字符串作为返回值。例如，我们可以考虑如下代码。

  1. var numberOfCats = prompt(“How many cats?”);
  2. var tooManyCats = numberOfCats + 1;

上面代码中，我们想要去拿到一个数字。第一行代码用户似乎在进行输入一个数字，我们可能希望第二行的语句中的数学运算可以正常工作。例如，如果用户输入的是3，我们可能会认为最后tooManyCats的值为4，但并不是这样的，prompt的返回值均是字符串类型。在执行第二行字符串”3“与数字1的加号链接运算时，JavaScript会将1转为字符串。因此，tooManyCats的值不是4，而是”31“。如果用户不输入任何内容并单击”确定“，则numberOfCats会被分配一个空字符串，当然如果用户单击取消，则会被分配一个特殊值null。

JavaScript弹出框

这里有三种弹出框：

  1. 警报框：如果我们想要去验证传递给用户的信息，它会被经常使用，用户必须单击确定才能继续。
  2. 确认框：如果我们希望用户去确认或接受一些消息，我们应该使用确认框。当确认框弹出时，用户需要去点击“确定”或“取消”才能继续。如果用户点击了确定，这个方法会返回true，如果用户点击了取消，会返回false。
  3. 提示框：如果我们希望用户在进入页面之前先输入一个值，通常会使用提示框。当弹出提示框时，用户必须单击“确定”或“取消”才能继续。如果用户单击“确定”，该方法会返回输入框中的值，如果用户单击“取消”，则会返回null。当警告框弹出时用户必须单击确定才能继续。

prompt()语法

下面举例说明prompt()方法的语法：

let result = window.prompt(message, default);

在这个语法中：

message是在对话框中显示的文本字符串，如果我们忽略了它，对话框上将不会显示任何内容。default是一个字符串，会作为文本输入框的值。result是一个包含用户输入文本的字符串或者是空值。prompt()在执行模式上与alert()和confirm()非常像，代码的执行，在用户作出响应之前，不会执行下一条语句。

JavaScript prompt例子

1. 显示提示对话框

以下示例使用prompt()方法显示一个对话框，对话框里需要用户去输入他们最喜欢的编程语言是什么。

let lang = prompt(‘你最喜欢的编程语言是什么?’);
let feedback = lang.toLowerCase() === ‘javascript’? `It’s great! ` :
`It’s ${lang}`;
alert(feedback);

将用户的输入转为数字

prompt()的返回值是一个字符串，如果我们想要得到一个数字，需要对它进行转化。下面这个例子变是使用prompt()去展示对话框来询问用户的年龄，如果他们大于或等于16岁，则是有资格加入的，否则就不是。

let ageStr = prompt(‘How old are you?’);
let age = Number(ageStr);
let feedback = age>= 16?
`You’re eligible to join.` :
`You must be at least 16 years old to join.`;
alert(feedback);

更多细节，可参考：https://www.technologiesinindustry4.com/2021/01/what-are-javascript-prompts.html

avatar
文章
阅读
粉丝