本文將介紹如何使用瀏覽器提供的 prompt() API,讓使用者做出選擇。
prompt() 函式可讓我們從使用者獲取輸入。
這個 API 已經存在於網頁的早期,並且獲得各大瀏覽器的支援。
它非常簡單易用,特別適用於快速原型開發,你可以直接調用 prompt() 函式來獲取使用者輸入,而不需要建立表單。
下面是使用方法:調用 prompt() 函式,並傳入一個字符串作為問題的描述:
prompt("你的年齡是多少?")
在 Chrome 瀏覽器中的效果如下:
在 Safari 瀏覽器中的效果如下:
在 Firefox 瀏覽器中的效果如下:
可以看到,每個瀏覽器的外觀有所不同,但運作原理是相同的。
需要呼叫 window.prompt() 函式,但由於 window 是隱含的,因此也可以直接呼叫 prompt()
瀏覽器會阻塞腳本的執行,直到使用者輸入內容並按下確定或取消按鈕。除非點擊按鈕,否則無法退出該操作。
輸入的值將從該函式返回,因此我們可以將其賦值給一個變數:
const age = prompt("你的年齡是多少?")
你還可以傳入第二個參數作為預設值:
const age = prompt("你的年齡是多少?", 18)
如果使用者未輸入任何內容並點擊確定,將返回一個空字符串。
如果使用者點擊取消按鈕,prompt() 函式將返回 null。