快捷導(dǎo)航

JavaScript 中的 prompt() 函數(shù)使用示例

更新時(shí)間：2025年09月06日 13:54:07 作者：玖程

在 JavaScript 中,prompt() 是瀏覽器提供的一個(gè)內(nèi)置函數(shù),用于向用戶顯示一個(gè)對(duì)話框,提示用戶輸入信息,本文給大家介紹JavaScript 中的 prompt() 函數(shù)使用示例,感興趣的朋友跟隨小編一起看看吧

一、基本語法

let userInput = prompt(message, defaultValue);

message（字符串）：顯示在提示框中的提示信息。
defaultValue（可選字符串）：輸入框中的默認(rèn)值。

返回值：

如果用戶點(diǎn)擊“確定”，返回輸入的內(nèi)容（字符串）。
如果用戶點(diǎn)擊“取消”或未輸入內(nèi)容并點(diǎn)擊“確定”，返回 null 或空字符串（取決于瀏覽器）。

二、使用示例

let name = prompt("請(qǐng)輸入你的名字：", "小明");
if (name !== null) {
    alert("你好，" + name + "！");
} else {
    alert("你沒有輸入名字。");
}

三、注意事項(xiàng)

阻塞執(zhí)行：prompt() 是同步阻塞的，會(huì)暫停 JavaScript 的執(zhí)行，直到用戶做出響應(yīng)。
用戶體驗(yàn)問題：現(xiàn)代網(wǎng)頁開發(fā)中，原生的 prompt 框樣式老舊，交互體驗(yàn)不佳，通常使用自定義模態(tài)框替代。
不適用于移動(dòng)端：在移動(dòng)端瀏覽器中，prompt() 的交互體驗(yàn)較差，推薦使用 <input> 元素或彈窗組件。
不能用于 Node.js 環(huán)境：Node.js 沒有瀏覽器的 window 對(duì)象，因此 prompt() 不可用。

四、替代方案（推薦）

在現(xiàn)代 Web 開發(fā)中，建議使用以下方式替代 prompt()：

使用 HTML + CSS + JavaScript 實(shí)現(xiàn)自定義彈窗。
使用第三方庫（如 SweetAlert2、Bootstrap Modal）。
使用表單元素（如 <input>）獲取用戶輸入。

示例（自定義彈窗）：

<input type="text" id="userInput" placeholder="請(qǐng)輸入內(nèi)容">
<button onclick="showResult()">提交</button>
<p id="output"></p>
<script>
function showResult() {
    let value = document.getElementById("userInput").value;
    document.getElementById("output").innerText = "你輸入的是：" + value;
}
</script>

五、總結(jié)

雖然 prompt() 是一個(gè)簡(jiǎn)單易用的用戶輸入方式，但在實(shí)際開發(fā)中，由于其樣式固定、交互不友好，通常不推薦在正式項(xiàng)目中使用。了解它的基本用法有助于理解瀏覽器與用戶的交互方式，但在實(shí)際項(xiàng)目中，建議使用更靈活的自定義組件來提升用戶體驗(yàn)。

到此這篇關(guān)于JavaScript 中的 prompt() 函數(shù)詳解的文章就介紹到這了,更多相關(guān)js prompt() 函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: