• 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('你好 
     world 
     !');

    (2)

    confirm("你好u000d world ") 

    (3)

    confirm("你好
     world ")

    四.用jquery ui 实现类似cofirm功能

    因为还没有接触到,所以先放到一边,等js学完了以后在回头看他。想知道如何实现的话就先参考一下这篇文章JQuery ui 实现类似于confirm的功能

    注意:本文为原创,转载请以链接形式标明本文地址 ,谢谢合作。

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

  • 相关阅读:
    WinHex简介
    CTF中图片隐藏文件分离方法
    隐写术的相关解法
    JPEG文件格式
    PNG文件结构
    网络安全实验室—基础关
    实验吧—密码学(1)
    YIT-CTF—隐写术
    YIT-CTF—Web
    YIT-CTF—社工类
  • 原文地址:https://www.cnblogs.com/wanghuih/p/5592991.html
Copyright © 2020-2023  润新知