你能徹底區分開JavaScript中的警告框、確認框和提示框嗎?

2020-12-08 一都編程

第1節. 警告框

#JavaScript#在JavaScript中,如果需要彈出一段提示信息,則可以使用警告框來實現,警告框使用window.alert()方法來實現。顯示帶有一段消息和一個確認按鈕的警告框。

如下是一段完整的Html+JavaScript代碼段,用於彈出警告框的:

<!DOCTYPE html><html<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> <script type="text/javascript"> function alertPage() { if (Text1.value == "") { window.alert("用戶名不能為空!"); } } </script></head><body> 用戶名:<input id="Text1" type="text" /> <input id="Button1" type="button" value="彈出" onclick="alertPage()" /></body></html>

此段代碼的含義是如果文本框的值為空值,則會彈出一個警告框,提示:「用戶名不能為空!」。是觸發了按鈕引發的事件執行的JS代碼,判斷文本框是否為空值的。

在Chrome瀏覽器中查看一下運行結果:

當用戶名文本框中的值為空時,點擊「彈出」按鈕,此時就會將瀏覽器的警告框彈出來,並顯示一段提示信息。

注意:警告框上只有一個「確定」按鈕,看完提示信息後需要點擊「確定」按鈕取消警告框。

第2節. 確認框

確認框在JavaScript中,使用confirm()方法表示,顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。

注意:confirm()會返回一個布爾類型的值,如果返回的值為true,則表示用戶點擊了「確定」按鈕,否則點擊了「取消」或關閉按鈕。

下面是一段JavaScript代碼,用來判斷是否刪除數據?這是在詢問用戶,用戶需要在確認框上做出選擇,要麼「確定」,要麼「取消」,只有這2種選擇。

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> <script> function confirmPage() { var b = window.confirm("是否確認刪除?"); if (b == true) { document.write("確認需要刪除!") }else { document.write("不需要刪除!"); } } </script></head><body> <input id="Button1" type="button" onclick="confirmPage()" value="刪除" /></body></html>

這裡封裝了一個函數,通過按鈕的onclick事件觸發函數,去執行彈出確認框的代碼。在瀏覽器中查看一下運行結果是什麼樣子:

此時出現在頁面上的就是確認框,還有一段提示信息。在點擊「確定」和「取消」按鈕後,輸出的結果是不一樣的。這裡點擊「確定」按鈕,確實要刪除數據,執行後:

當用戶在確認框上做出選擇後,可以輸出文本信息,也可以轉到另外一個頁面上去,引導用戶進行下一步的操作。

第3節. 提示框

提示框使用prompt()方法表示,prompt()方法彈出一個可以讓用戶輸入文本信息的對話框,也是唯一個可以與用戶對話的框。

prompt()方法執行完成後,會將用戶輸入的文本值返回,這樣開發者就可以得到輸入的文本值,進行下一步判斷和操作。

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> <script type="text/javascript"> function promptPage() { var x = window.prompt("請輸入您的姓名"); document.write(x); } </script></head><body> <input id="Button1" type="button" onclick="promptPage()" value="彈出" /></body></html>

在這段JS代碼中,要求用戶輸入自己的姓名,輸入完成後,並在頁面上顯示出來。

此時出現的提示框中有一個文本框,這個文本框是瀏覽器給我們的,讓用戶輸入一段內容。

當輸入的內容是「小明」後,就會在頁面上輸出。如果沒有在文本框中輸入任何內容,則接收的值為null。

第4節. 換行

在HTML中,可以使用的換行有:<br/>,還可以使用<p/>。

但是在JavaScript的所有彈窗中要使用換行,則要使用\n實現:

var x = window.prompt("請輸入您的姓名:\n包含全名");

在這裡,我們在提示信息中使用了\n來換行,也就是將提示信息分兩行顯示。這樣有助於分段,讓用戶更好的理解提示信息。

這個\n在警告框、確認框和提示框中都是可以使用的,起到一個折行顯示的效果。

相關焦點

  • 在JavaScript中使用Window對象的警告框、確認框、窗口尺寸和操作
    常用方法和屬性在瀏覽器中,除了我們用戶以可視化的方式操作瀏覽器之外,各大瀏覽器還提供了以對象模型的方式讓開發者也能操作瀏覽器。如瀏覽器的「後退」功能,除了可以使用滑鼠點擊實現之外,還可以使用BOM實現。對於學習JavaScript開發者來說,最常用的與瀏覽器交互的就是彈出警告框和確認框。
  • 被「黑框警告」的孟魯司特,該如何安全使用?
    3月4日,美國食品藥品監督管理局(FDA)發布了一則藥品安全信息警告,針對孟魯司特(montelukast,處方藥物孟魯司特鈉montelukast sodium)可能出現的嚴重精神健康副作用(風險可能包括產生自殺的想法或行為),發出黑框警告,並建議限制該藥在過敏性鼻炎中的使用。看到「黑框警告」,很多人會特別緊張。
  • B端UI界面交互基礎組件:會話框
    導語:在前一篇文章《B端UI界面交互基礎組件-表單》中,一起學習了B端「表單」組件UI設計規範,其中包括「基礎表單」、「全頁表單」;並從表單組件的需求場景、內容布局以及交互方式等方面對以上組件進行了詳盡的規範描述;今天我們繼續介紹了B端「會話框」組件的交互規範。一、基礎會話框1.
  • 黑框警告後,孟魯司特鈉還能用嗎?
    所以,當今年3月FDA給孟魯司特鈉增加黑框警告,提醒該藥存在神經精神不良反應風險,著實讓許多患者或患者家長忐忑不安。 那麼,黑框警告後,孟魯司特鈉還能用嗎?
  • Application.DisplayAlerts不顯示警告對話框
    原因是,假設你一共是10張表,刪除一張,就少了一張,後面就只有9張表,8張表,7張表,但是代碼的意思還是,第3張,第4張……第8張,第9張,第10張,所以報錯。可以使用以下代碼,聲明i為工作表對象,遍歷集合中的每個表,只要表的名字不是"Sheet1",刪除,這樣就可以保留這一張表,其他的全刪除。
  • 瀏覽器中的三種對話框,與兩種計時器
    一、window對象1對話框在window對象中,一共有三種對話框:①警示框:window.alert()alert,警示的意思,這個昨天就提到過。就是起到一個警示用戶的作用,沒有返回值,只有一個確認按鈕。②提示框:window.prompt();prompt,提示的意思。翻譯成提示似乎並不太準確,因為它是需要用戶輸入內容的。
  • DELMIA軟體:文本信息提示框功能介紹與使用方法
    在DELMIA軟體中文本信息提示框是以一種工藝資源節點被創建,仿真人員可以在「PERT」圖編輯器中對其進行工藝排布,以確定文本信息提示框彈出的時機。在新的Edit Text Operation對話框裡,Window Title下的輸入框中輸入文本信息提示框的標題,然後在Key-in Text下的輸入框中輸入文本信息提示的正文內容。值得注意的是文本信息提示框標題是必須設置的,否則無法創建文本信息提示。
  • 孟魯司特鈉被 FDA 黑框警告,真就不能再用了嗎?
    附加藥物:用於嚴重哮喘,經高劑量控制藥物治療(通常是 ICS-LABA)優化治療,並治療可變的危險因素,症狀持續或/和仍有急性加重。 孟魯司特在哮喘治療中的地位不高,屬於「其它可選控制藥物」。哮喘的控制藥物主要還是 ICS/LABA。
  • 《柳葉刀》最新研究,能洗脫非布司他的「黑框警告」嗎?
    這或許提示我們「應重新考慮並修改,避免在合併心血管疾病的痛風患者中使用非布司他的監管建議」。01CARES研究重「錘」之下非布司他遭FDA黑框警告2009年,非布司他在美國獲批上市,是繼全球第一代抗痛風藥別嘌醇上市40年後,首個批准用於痛風及高尿酸治療的藥物。
  • 小技巧|快速製作表單中的框√和框×,10秒鐘就能學會
    來源:公眾號 戴爾商用客戶端解決方案在用Word、Excel製作表單時經常需要在其中用到框√和框×但大多數人都不知道 框√和框×是如何製作出來的於是不得不尋求同事的幫助或者翻找他人的表格將其複製出來粘貼到自己的表格中即使這樣也還會面臨下一次的窘境今天就教大家
  • iOS和Android規範解析——簡易菜單、簡易對話框和彈出框
    Simple Menu;簡易對話框,對應的是MD中的Simple Dialog,彈出框對應的是iOS中的Popover。可以看到,iOS的彈出框和Android的菜單比較相似,但iOS的彈出框是出現在入口的下面的,且要有箭頭,指示入口的位置。關於彈出框,需要注意以下幾點:一次只能出現一個彈出框。
  • 表單中的勾選框和開關
    可選項可以用勾選框、開關、單選框和下拉菜單表示。選擇得當的話,任何一種都非常出色。本文中,我們重點關注勾選框和開關。勾選框用在一系列選項中,用戶可以選擇任意數量,包括0個、1個,或者許多個。換言之,每個勾選框在列表中都是相互獨立的,勾上一個框並不會取消其他選項。
  • 孟魯司特鈉遭FDA黑框警告,衝擊默沙東、大冢、安必生……
    FDA(美國食品藥品管理局)3月4日發布藥物安全通訊,要求對孟魯司特鈉增加黑框警告,以加強該藥現有的關於精神健康副作用的警告。目前中國關於該品種有32個批文,涉及14家企業,預計將受此擊。根據FDA上述通訊,服用孟魯司特鈉可能會出現的副作用包括激動、抑鬱、易怒、躁動、睡眠困難、不受控制的肌肉運動,以及自殺的想法和行動等。
  • 精通React/Vue系列之帶你實現一個功能強大的通知提醒框
    本文將會使用React來開發該組件,也會使用到Javascript中常用的一些設計模式,比如單例模式,但是不管你使用什麼框架來實現,原理都是通用的,如果感興趣的朋友可以用vue也實現以一下。如果對設計模式不是很了解,可以移步:15分鐘帶你了解前端工程師必知的javascript設計模式(附詳細思維導圖和源碼).
  • 事關全球3億哮喘患者,受FDA黑框警告的孟魯司特鈉還能吃嗎?
    得知美國食品藥品監督管理局(FDA)發布針對哮喘和過敏藥物孟魯司特鈉的安全警告之後,上海一位呼吸科醫師這樣說道。3月4日,美國FDA發布通告,要求在孟魯司特鈉的說明書中增加黑框警告,以強調其可能帶來的嚴重神經/精神事件風險,包括興奮、抑鬱、自殺傾向,並對醫生提出限制過敏性鼻炎患者用藥的建議。
  • 安眠藥可能致殘,美國FDA給這三種藥加黑框警告
    近日,美國食品和藥品管理局(FDA)要求,右佐匹克隆、扎來普隆、唑吡坦三種安眠藥應在包裝上加【黑框警告】,以確保患者和醫生提高警惕、安全使用。
  • 美國藥監局黑框警告!這種兒童藥副作用大、限制使用!孩子還能用嗎?
    2020年3月4日,美國食品藥品監督管理局(FDA)宣布給孟魯司特鈉(順爾寧)加個黑框警告(Boxed Warning),用以提醒廣大醫務人員和患者這個藥有神經精神系統的相關副作用風險,比如自殺的念頭或行為等;並建議限制其在過敏性鼻炎中的使用。
  • 彈框體系總結:模態彈框和非模態彈框
    以網易雲音樂為例,你要刪除歌曲時,「確認刪除」提示就是通過動作欄來完成的(如左圖)。其實這裡使用對話框也是完全可以的(如右圖),網易雲音樂的設計師在這裡使用的動作欄的理由我不得而知。但是我的個人猜測是,動作欄位於屏幕下方,相對來說對界面內容的遮蓋會小一點。
  • (進階篇)PHP+Mysql+jQuery實現查詢和列表框選擇操作
    本文講解如何通過ajax查詢mysql數據,並將返回的數據顯示在待選列表中,再通過選擇最終將選項加入到已選區,可以用在許多後臺管理系統中。本文列表框的操作依賴jquery插件:Multiselect。='liOption' multiple='multiple' size='8'>    </select>    </div>    <input type="submit" value="提 交" /> </form> 說明,HTML內容是一個表單,裡面放置有一個查詢輸入框,和一個列表框
  • 給這個app打分|App中邀請評價的提示框怎麼做?
    」彈出這樣的對話框已非常尋常,很難做到不被提示去評論。在如今的app中,這種擾人的要求設置太多見了:然而,鼓勵用戶評價你的app對開發者來說非常重要。在這篇文章中,我們將盡力找到這個問題的答案:「我們怎麼能提示我的用戶去評分和評價不遭他們的嫌棄呢?」為什麼會有評分和評價這件事?