如何使用window.prompt()

291 阅读2分钟

灵感来自David Walsh的这条微博。

说出一个人们不常使用但真的很应该使用的CSS或JavaScript API!我开玩笑地回答说 "prompt()"。

- David Walsh (@davidwalshblog)2021年4月6

我以开玩笑的方式回复了 "prompt()",于是我想到要写一篇关于这个由浏览器的window 对象暴露出来的超级古老的API的文章:prompt()

prompt() 它让我们从用户那里获得输入。

这个API可以追溯到网络诞生之初,而且每个浏览器都支持。

它非常简单,我认为它可能会很方便,特别是在应用程序的原型设计时,所以你可以直接调用一个prompt() ,然后就可以了,不用设置一个表单。

以下是它的工作原理:你调用prompt()

你传递一个字符串,代表我们向用户提出的问题。

prompt("How old are you?")

这是它在Chrome中的样子。

这是在Safari中的情况。

这是在Firefox中。

正如你所看到的,它是不同的,但概念是相同的

你应该调用window.prompt() ,但由于window 是隐含的,所以prompt() 也可以。

浏览器会阻止脚本的执行,直到用户输入一些东西并点击确定或取消按钮。如果不点击按钮,你就无法从中逃脱。

输入的值会从这个函数中返回,所以我们可以把它分配给一个变量。

const age = prompt("How old are you?")

你可以传递第二个参数,这是提示中预填的默认值。

const age = prompt("How old are you?", 18)

如果用户什么都不输入并点击确定,将返回一个空字符串。

如果用户点击了取消按钮,prompt() 函数调用就会返回null