JavaScript prompt()

admin發表於2018-09-22
JavaScript

呼叫此方法可以彈出一個對話方塊， 此對話方塊具有文字輸入功能，且具有確定和取消按鈕。

兩個按鈕的具體功能後面會有程式碼例項演示。

prompt方法與alert和confirm兩個方法類似。

異同點如下：

（1）.都可以彈出一個框。

（2）.prompt方法彈出的框具有文字輸入功能，alert和confirm不能輸入文字。

更多window物件內容參閱JavaScript window 物件一章節。

特別說明：window物件方法都可以直接使用，無需使用window呼叫。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
prompt(text,defaultText)

引數解析：

（1）.text：可選，對話方塊的提示文字，通常用於對使用者輸入文字內容的提示。

（2）.defaultText：可選，預設輸入的文字內容。

瀏覽器支援：

（1）.IE瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safria瀏覽器支援此此方法。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
window.onload = function () {
  let odiv = document.getElementById("ant");
  let obt=document.getElementById("bt");
  bt.onclick = function () {
    let txt = prompt("請輸入文字", "螞蟻部落");
    odiv.innerHTML = txt;
  }
}
</script> 
</head>
<body> 
<div id="ant"></div>
<input type="button" value="點選檢視演示" id="bt" />
</body>
</html>

上面程式碼實現了對prompt方法的演示效果，下面介紹一下實現過程。

（1）.點選按鈕之後，觸發click事件。

（2）.然後執行事件處理函式，執行到let txt = prompt("請輸入文字", "螞蟻部落")，那麼會彈出一個對話方塊。

截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/22/131247paindr53ec57xj6g.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

特別說明：在不同的瀏覽器，彈出框的外觀可能會有所不同。

方法中兩個引數的作用已經很明顯了。

如果感覺預設的內容不滿意，那麼我們可以填寫其他內容，比如"螞蟻一樣奮鬥"。

點選確定按鈕，那麼prompt方法的返回值就是輸入或者預設的文字內容。

如果點選取消按鈕，方法的返回值是null。

最後總結：

（1）.彈出框可以輸入文字內容。

（2）.點選確定，方法返回輸入的文字內容，點選取消返回null。

通常自帶的功能都是比較醜陋的，為了提高美觀度和靈活性，通常需要模擬實現。

關於更加漂亮的彈出框效果可以在特效下載版塊彈出層分類中查詢。

相關文章