confirm確認對話框


還記得之前的javascript入門里的講的confirm 消息對話框嗎?不記得也沒關系,我們先來回顧一下,然后在詳細講它。

復習:

confirm 消息對話框通常用於允許用戶做選擇的動作,如:“你對嗎?”等。彈出對話框(包括一個確定按鈕和一個取消按鈕)。

語法:

confirm(str);

參數說明:

str在消息對話框中要顯示的文本
返回值: Boolean值

返回值:

當用戶點擊"確定"按鈕時,返回true
當用戶點擊"取消"按鈕時,返回false

: 通過返回值可以判斷用戶點擊了什么按鈕

看下面的代碼:

<script type="text/javascript">
    var mymessage=confirm("你喜歡JavaScript嗎?");
    if(mymessage==true) { document.write("很好,加油!"); } else { document.write("JS功能強大,要學習噢!"); } </script>

結果:

 

消息對話框是排它的,即用戶在點擊對話框按鈕前,不能進行任何其它操作。

任務

使用confirm()提示框,當點擊按鈕時,完成性別確認。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>confirm</title>
  <script type="text/javascript">
  function rec(){
    var mymessage=confirm("你是女士!"); if(mymessage==true) { document.write("你是女士!"); } else { document.write("你是男士!"); } } </script> </head> <body> <input name="button" type="button" onClick="rec()" value="點擊我,彈出確認對話框" /> </body> </html>

結果:我的隨筆 - 我的前端之路 - 博客園

延伸:

一.之前有說過,功能的話最好用函數來寫,那樣的話每一個函數都是一個功能,以后有用到這些功能的話,就可以直接用了。即復用。所以要習慣這樣哦。。。。。。

就像上面那個例子

<script language="JavaScript">

function confirm (){

    var msg=confirm("你是女士!");

    if(msg==true)

    {

        document.write("你是女士!");

    }

    else

    {

        document.write("你是男士!");

    }

  }   

  </script>
然后給input調用函數,加個onClick="confirm ()"

注意:之前在博問里問過onclick="return confirm()",onclick="confirm()"有什么不同,幾個熱心的網友回復了我,現在我總結一下:

confirm是有返回值的。然后onclick函數需要一個返回值,如果不是return confirm(),那么onclick接受到返回值就是undefined,那么表單本身的默認函數就會被觸發。

如:
<form action="http://www.baidu.com">
    <button type="submit" onclick="confirm();">提交</button>
</form>
<form action="http://www.baidu.com">
    <button type="submit" onclick="return confirm();">提交</button>
</form> 

return false,會產生event.preventDefault()的效果,加上的話就不會出現表單點取消也被提交的情況了。

二.我們來對javascript window.confirm的方法做個小結

第一種:

 
          

就是上面我們提到的那種方法

<script language="JavaScript"> 

function confirm (){

    var msg=confirm("你是女士!");

    if(msg==true)

    {

        document.write("你是女士!");

    }

    else

    {

        document.write("你是男士!");

    }

  }   

  </script>
<input name="button" type="button" onClick="return confirm()" value="點擊我,彈出確認對話框" />

注意:input ,buttton,form的的onclick()事件的方法前面需要加一個return ,想這樣一樣:onClick="return confirm ()",以避免產生點擊取消表單依然被提交的情況。

為了確保點擊取消后,不做操作,最好給取消操作返回個false結果。

即:

<script language="JavaScript"> 
function confirm (){
    var msg=confirm("確定刪除!");
    if(msg==true)
    {
        document.write("刪除成功!");
    }
    else
{
        return false;
           }
  }    
  </script>
<input name="button" type="button" onClick="return confirm ()" value="刪除" />
第二種:

在標簽中寫:

  1.

 <a href="javascript:if(confirm('確實要刪除該內容嗎?')) location='#'">刪除</a>
2 .
 <a href="#" onclick= "if(confirm( '確實要刪除該內容嗎?')==false)return false; ">點擊確定</a>
想簡單點調用的話 也可以這樣

代碼如下:

 
          
<a href="#" onclick= "return confirm('確實要刪除該內容嗎?');">刪除</a>
第三種:
<script language="JavaScript">

function del_confirm(e)

{

if (event.srcElement.outerText == "刪除")

{

event.returnValue = confirm("刪除是不可恢復的,你確認要刪除嗎?");

}

}

document.onclick = delete_confirm;

</script>
<a href="#" onClick="del_confirm">刪除</a>

第四種:

<script language="JavaScript">

function del_confirm()

{

event.returnValue = confirm("刪除是不可恢復的,你確認要刪除嗎?");

}

</script>
<a href="http://www.baidu.com" onClick="del_confirm()">刪除</a>

二.如何將confirm 確定 取消 按鈕替換成 是 否

1.confirm重寫
2.用了vbscript來改寫,暫時還沒接觸到vbscript,所以先放到一邊,等以后有時間學習了回頭看他。想知道如何實現的話就先參考下javascript JS 中confirm 確定 取消 按鈕替換成 是 否 取消

三.js confirm換行詳解

(1)

confirm('你好 \n world \n !');

(2)

confirm("你好\u000d world ") 

(3)

confirm("你好\r world ")

四.用jquery ui 實現類似cofirm功能

因為還沒有接觸到,所以先放到一邊,等js學完了以后在回頭看他。想知道如何實現的話就先參考一下這篇文章JQuery ui 實現類似於confirm的功能

注意:本文為原創,轉載請以鏈接形式標明本文地址 ,謝謝合作。

本文地址:http://www.cnblogs.com/wanghuih/p/5592991.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM