本文將介紹如何使用瀏覽器提供的 prompt() API,讓使用者做出選擇。

prompt() 函式可讓我們從使用者獲取輸入。

這個 API 已經存在於網頁的早期,並且獲得各大瀏覽器的支援。

它非常簡單易用,特別適用於快速原型開發,你可以直接調用 prompt() 函式來獲取使用者輸入,而不需要建立表單。

下面是使用方法:調用 prompt() 函式,並傳入一個字符串作為問題的描述:

prompt("你的年齡是多少?")

在 Chrome 瀏覽器中的效果如下:

在 Safari 瀏覽器中的效果如下:

在 Firefox 瀏覽器中的效果如下:

可以看到,每個瀏覽器的外觀有所不同,但運作原理是相同的。

需要呼叫 window.prompt() 函式,但由於 window 是隱含的,因此也可以直接呼叫 prompt()

瀏覽器會阻塞腳本的執行,直到使用者輸入內容並按下確定或取消按鈕。除非點擊按鈕,否則無法退出該操作。

輸入的值將從該函式返回,因此我們可以將其賦值給一個變數:

const age = prompt("你的年齡是多少?")

你還可以傳入第二個參數作為預設值:

const age = prompt("你的年齡是多少?", 18)

如果使用者未輸入任何內容並點擊確定,將返回一個空字符串。

如果使用者點擊取消按鈕,prompt() 函式將返回 null。