精华内容
下载资源
问答
  • html实现确认和取消按钮

    万次阅读 2016-05-19 01:19:36
    每个form只需要一个重置按钮,在form与/form之间,不管有多少内容,一个重置就可以清空所有内容。   onclick="return confirmReset()"的值决定是否继续执行下一步动作,如果为false则不继续,如果为true,则...

    在填写表单的时候,有时候需要设置确认和重填的功能,可以借助JavaScript来实现。


    就像这样,点击重填后,弹出确认框。

     

    <inputtype="reset" value="重填"οnclick="return confirmReset()" class="buttonstyle" />

    <script> 

    function confirmReset(){

           var clickresult = false;

           clickresult =window.confirm("点击重填后所有信息都将被清空。\n你确认重填吗?");

           return clickresult;

    }

    </script>

    这里用到了window. Confirm函数。

    点击后:


    如果点击确定,则所有已填写信息都会被清空,点击取消则维持不变。

    每个form只需要一个重置按钮,在form与/form之间,不管有多少内容,一个重置就可以清空所有内容。

     

    οnclick="return confirmReset()"的值决定是否继续执行下一步动作,如果为false则不继续,如果为true,则继续,前面提到的submit也是类似的。


    展开全文
  • 用户点浏览器的最大化最小化关闭按钮中的关闭按钮时  onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。  该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。  对话框默认的提示...

    1、不带任何提示关闭窗口的js代码

    <input type="button" name="close" value="关闭" οnclick="window.close();" />

    2、自定义提示关闭

    <script language="javascript">
    // 这个脚本是 ie6和ie7 通用的脚本
    function custom_close(){
        if(confirm("您确定要关闭本页吗?")){
            window.opener=null;
            window.open('','_self');
            window.close();
        }
        else{
        }
    }
    </script>
    <input id="btnClose" type="button" value="关闭本页" onClick="custom_close()" />

    3、在即将离开当前页面(刷新或关闭)时

    转到菜鸟教程 
    用户点浏览器的最大化最小化关闭按钮中的关闭按钮时 
    onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。 
    该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。 
    对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类似 “确定要离开此页吗?”。该信息不能删除。 
    但你可以自定义一些消息提示与标准信息一起显示在对话框。 
    注意: 如果你没有在 元素上指定 onbeforeunload 事件,则需要在 window 对象上添加事件,并使用 returnValue 属性创建自定义信息(查看以下语法实例)。 
    注意: 在 Firefox 浏览器中,只显示默认提醒信息(不显示自定义信息)。 
    可以在about:config中将dom.allow_scripts_to_close_windows改为true。这里写图片描述

    HTML 中:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>html中</title>
    </head>
    <body onbeforeunload="return myFunction()">
    <p>该实例演示了如何向 body 元素添加 "onbeforeunload" 事件。</p>
    <p>关闭当前窗口,按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
    <a href="http://www.runoob.com">点击调整到菜鸟教程</a>     
    <script>
        function myFunction() {
            return "我在这写点东西...";
        }
    </script>
    </body>
    </html>

    JavaScript 中:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>html中</title>
    </head>
    <body onbeforeunload="return myFunction()">
    <p>该实例演示了如何向 body 元素添加 "onbeforeunload" 事件。</p>
    <p>关闭当前窗口,按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
    <a href="http://www.runoob.com">点击调整到菜鸟教程</a>     
    <script>
        function myFunction() {
            return "我在这写点东西...";
        }
    </script>
    </body>
    </html>
    JavaScript 中, 使用 addEventListener() 方法:
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JavaScript 中, 使用 addEventListener() 方法</title>
    </head>
    <body>
        <p>该实例演示了如何使用 addEventListener() 方法向 body 元素添加 "onbeforeunload" 事件。</p>
        <p>关闭当前窗口,按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
        <a href="http://www.runoob.com">点击调整到菜鸟教程</a>
    <script>
        window.addEventListener("beforeunload", function(event) {
            event.returnValue = "我在这写点东西...";
        });
    </script>
    </body>
    </html>

    4、onload,onunload,onbeforeunload

    window.onload事件设置页面加载时执行的动作,即进入页面的时候执行的动作。 
    window.onunload已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用 
    一般用于设置当离开页面以后执行的动作。 
    window.onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取,简单来说就是在离开页面前的,一般用做提醒问你是不是要离开这个页面。 
    onunload和onbeforeunload都是在页面刷新和关闭前的动作,但是onbeforeunload是先于onunload的并且Onunload是无法阻止页面的更新和关闭,而 Onbeforeunload 可以做到。

    举个例子:

    <html>
    <head>
    <title>test close window</title>
    <script type="text/javascript"> 
    function hello(){
        alert("hello world");
    } 
     
    function ha(){
        alert("bye");
    }
    function go(){
        event.returnValue = "真的要退出吗?";
    } 
    </script>
    </head>
    <body onload="hello();" onunload="ha(); " onbeforeunload="go();">
    <h1>hello world</h1>
    <a href="http://www.baidu.com">heloo </a>
    </body>
    </html>

    用js onload处理html页面加载之后的事件

    <script type="text/javascript"> 
    window.οnlοad=function(){ 
    alert("加载完毕") 
    } 
    </script> 

    5、删除或(卸载)window.onbeforeunload事件

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>无标题页</title>
    </head>
    <script>
    window.onbeforeunload = onbeforeunload_handler;   
      function onbeforeunload_handler(){
     
      var warning="注意,确认关闭将导致系统崩溃";   
      return warning;   
      }
     
    function removefun()
    {
      window.οnbefοreunlοad=null;
    }
    </script> 
    <body class="frmbase">
        <form>   
            <div id="box" onclick="removefun()">点击我移除确认弹窗</div>
        </form>   
    </body>
    </html>

     

    展开全文
  • HTML实现关闭按钮

    千次阅读 2021-03-25 15:27:46
    css部分 HTML部分 标题 关闭 js部分 //关闭 var obt1 = document.getElementById("bt1"); obt1.onclick = function () { document.getElementById("demo").style.display="none"; } var obt = document....

    css部分

    <style>
        .close {
              position: absolute;
              display: inline-block;
              width: 30px;
              height: 30px;
              overflow: hidden;
              top: 5px;
              right: 5px;
            }
            
            .close::before, .close::after {
              content: '';
              position: absolute;
              height: 2px;
              width: 100%;
              top: 50%;
              left: 0;
              margin-top: -1px;
              background: #000;
            }
            .close::before {
              -webkit-transform: rotate(45deg);
              -moz-transform: rotate(45deg);
              -ms-transform: rotate(45deg);
              -o-transform: rotate(45deg);
              transform: rotate(45deg);
            }
            .close::after {
              -webkit-transform: rotate(-45deg);
              -moz-transform: rotate(-45deg);
              -ms-transform: rotate(-45deg);
              -o-transform: rotate(-45deg);
              transform: rotate(-45deg);
            }
            
            
            .close.thick::before, .close.thick::after {
              height: 4px;
              margin-top: -2px;
            }
            .close:hover::before, .close:hover::after {
              background: #1ebcc5;
            }
       
        </style>

    HTML部分

    <div id="demo" class="top" style="padding:35px 35px 0;overflow:auto;width:60%;height:500px;background-color:rgba(240,240,240,1);position:fixed;margin:0 auto;
                        left:20%;top:100px;border-radius:5px;z-index:9999;display:none;">
                            <div style="position:absolute;top:10px;font-size:16px;font-weight:900">标题</div>
                             <div>
                            <span class="close thick" id='bt'></span>
                            </div>
                            <div  style="position:absolute;left:0px;width:100%;background-color:rgb(255,255,255);">
                            <br>
                            
                            <div style="text-align:center;vertical-align:middle;top: 80%;position: relative;">
                            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" type="button"  id="bt1" lay-submit lay-filter="login" align="right" >关闭</button>
                            </div>
        </div>

    js部分

    //关闭
            var obt1 = document.getElementById("bt1");
              obt1.onclick = function () {
                  document.getElementById("demo").style.display="none";          
              }

     var obt = document.getElementById("bt");
              obt.onclick = function () {
                  document.getElementById("demo").style.display="none";
              }

    展开全文
  • html 跳转页面取消浏览器返回按钮

    千次阅读 2018-03-21 22:48:05
    今天遇到个问题 就是跳转页面后 取消掉浏览器返回按钮其实这个问题解决起来也是很简单的一个问题,弄差不多一个小时,,,,累看location的文档就可以知道,有个replace()方法location.replace()跳转后的页面不会...

    今天遇到个问题 就是跳转页面后 取消掉浏览器返回按钮



    其实这个问题解决起来也是很简单的一个问题,弄差不多一个小时,,,,累

    看location的文档就可以知道,有个replace()方法

    location.replace()跳转后的页面不会保存在浏览器历史中,即无法通过返回按钮返回到该页面。

    使用window.location.replace(“http://www.baidu.com”)这样跳转就可以达到效果了。。。。。

    也是很简单的。

    展开全文
  • HTML按钮点击消除边框

    千次阅读 2020-12-10 23:23:14
    按钮是前端最基本的元素之一,有时候我们会用到各种样式的按钮。 有时候还需要设计按钮被点击后的样式。 这篇博客记录一下关于按钮点击后消除边框的技巧 这是一个点击前的按钮 下图是点击后 在CSS文件中输入...
  • 点击取消按钮,返回上层界面

    千次阅读 2017-11-27 16:11:00
    1 onClick="history.back();" 本文转自 爱笑嘚蛋蛋 51CTO博客,原文链接:http://blog.51cto.com/dd118/1872615,如需转载请自行联系原作者 ...
  • DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g
  • html去除input聚焦时的边框 html中,当input标签获取焦点的时候, input标签外围会出现边框,有的时候我们需要...bootstrap的button按钮点击之后会有边框怎么解决? .btn:focus,.btn:active:focus,.btn.active:fo...
  • html:cancelhtml:cancel标签生成一个取消按钮。当点击该按钮后action servlet会绕过相应的form bean的validate()方法,同时将控制权交给相应的action。在该action中可以使用Action.isCancelled(HttpServletRequest)...
  • 浏览器在线PDF预览取消下载按钮

    千次阅读 多人点赞 2021-05-25 18:34:22
    浏览器PDF取消办法: 在需要URL地址后边加上代码 PDF.JS取消下载的办法: 浏览器PDF取消办法: 在需要URL地址后边加上代码 '#toolbar=0' 加了代码: 或者 修改完看下效果: 上面的整行黑条都没了 ...
  • html去掉button的默认样式

    千次阅读 2019-10-30 10:13:58
    button { border-style: none; outline: none; }
  • Vue实现简单的按钮选中和取消功能

    千次阅读 2019-10-24 22:01:02
    html代码: <!doctype html> <html lang="en"> <head> <title>Title</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name...
  • private void button2_Click(object sender, EventArgs e)  {   MessageBox.Show("ABC",MessageBoxButtons.OKCancel);...转载于:https://www.cnblogs.com/deepwishly/archive/2010/07/22/2551223.html
  • layer弹出层自定义提交取消按钮

    千次阅读 2019-05-06 11:03:48
    取消 button > div > div > div > form > div > @} 然后是js函数实现 /** * 关闭此对话框 */ closehe = function ( ) { console . log ( "close" ) ; // var inde=...
  • HTML 重置按钮

    万次阅读 2018-04-13 20:12:27
    重置按钮有时候,用户填完表单信息后,发现填写错误,希望将表单数据还原为页面加载时的状态。为此,可以在表单上创建一个重置按钮(reset按钮)。把 input 元素的 type 属性设置为“reset...取消"&gt;上述...
  • html 键盘按键与按钮功能关联

    千次阅读 2018-09-05 16:33:49
    DOCTYPE html&gt; &lt;html &gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;script type="text/javascript"&gt
  • 用户点浏览器的最大化最小化关闭按钮中的关闭按钮时  onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。  该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。  对话框默认的提示信息...
  • uni.showModal({ content: '没有取消按钮的弹框', showCancel: false, buttonText: '确定', success: (res) => { if (res.confirm) { console.log('用户点击确定'); } else if (res.cancel) { ...
  • var cof=window.confirm("确认提交吗?");  if(cof==true)  return true; //确认  else  return false; //取消
  • html button去除默认样式

    千次阅读 2019-03-21 10:53:34
    .div_homedetail .btn_detail { float: right; margin: 0; padding: 0; background-color: transparent; border: 0px solid transparent; outline: none; }
  • confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。 语法 confirm(message) 参数 描述 message 要在 window 上弹出的对话框中显示的纯文本(而非 HTML 文本) 说明 如果用户点击确定按钮,则 ...
  • 需求:修改弹框中的取消/确定按钮顺序,及头部和底部背景颜色; 原ui效果图 需求ui效果图 方法:对取消及确定按钮自定义类名,样式重写 转载于:...
  • DatePickerDialog的确定和取消按钮

    千次阅读 2015-10-15 22:05:18
    今天遇到一个时间弹出框的问题, 就是想用时间框的取消按钮清空文本显示的日期数据。 然而取消按钮每次都要调用OnDateSetListener.onDateSet方法,就会影响取消按钮完成的功能! 下面是我一步一步完成的过程,这样我...
  • 今天有个工作是把所有的确认按钮放在取消按钮的左边,类似于下图这样的,公司用的时antd组件 但是antd组件的按钮时确认键放在右边的 可以采用下面的方式,将按钮调换过来: 对的,就是在modal里面的footer...
  • layer.confirm('根据证监会的适当性要求,您需要重新进行风险测评!', {  btn: ['是','否','否(看全部)'] //按钮  ,btn3: function(index, layero){  localStorage.setItem("choosePro",1);  window.locati
  • ![图片说明](https://img-ask.csdn.net/upload/201705/08/1494234617_199152.png) 如图所示,如果没法添加事件,请问有没有别的办法,或者怎么判断onchange事件没触发?
  • HTML禁用按钮

    千次阅读 2018-04-08 13:41:09
    &lt;!-- 失去效果--&gt; document.getElementById("btn1").disabled=true; &lt;!--变成灰色--&gt; document.getElementById('btn1').style.color = "... do...
  • 去除之前,关闭按钮有高亮边框 给元素加上id,在css中添加两行去除边框和外显就行,这是去除之后
  • html消除button之间的间距

    万次阅读 2015-08-19 10:45:06
    关于html中input标签中button属性和button标签的奇怪现象,有助于解决消除button之间的默认间距,代码如下,复制即用,谢谢!<html> ... charset=utf-8" /> 按钮之间的距离 <style type="text/css"

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 128,554
精华内容 51,421
关键字:

html取消按钮