在一般的情况下,我们在浏览网页的时候按下ctrl+s,浏览器会弹出一个保存网页的框。
但是在一些特定的网页中,我们希望ctrl+s不是弹出默认的保存窗口,而是进行一下别的操作。
比如在我们使用简书的时候,我们按下ctrl+s的时候,是不会弹出保存窗口的。而是把我们正在编辑的文字进行保存。这个操作在一些特定的网页中是十分必要的。因为我们在编辑的文字的时候,会习惯性地按下ctrl+s进行保存,如果这个时候弹出保存窗口的话,肯定是不方便的。
<script>
document.addEventListener("keydown", function(e) {
//可以判断是不是mac,如果是mac,ctrl变为花键
//event.preventDefault() 方法阻止元素发生默认的行为。
if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
e.preventDefault();
// Process event...
document.getElementById("test").innerHTML = "ctrl+s成功";
}
}, false);
</script>

在网页中加入以上的代码,就可以改变ctrl+s的默认操作。

  • 1.首先添加keydown事件,在键盘按下的时候进行操作
  • 2.判断按下的按键是什么,e.keyCode = 83 是s键
  • 3.之后判断一下用户的操作系统,如果我们的系统是MacOS,我们就判断花键即e.metaKey,
    如果是windows我们就判断ctrl键即e.ctrlKey
  • 4.如果是ctrl+s键被按下了,那这个时候我们使用event.preventDefault()//这个方法阻止元素发生默认的行为

转自简书 改变浏览器中默认的ctrl+s方法

改变浏览器中默认的ctrl+s方法的更多相关文章

  1. 浏览器中F5和CTRL F5的行为区别及如何强制更新资源

    一.浏览器中F5和CTRL F5的行为区别 我们直接来看效果,下面是我打开qq网页,分别使用F5和CTRL F5,我们来看区别. F5: CTRL F5: 区别: 首先直观上的区别是CTRL F5明显 ...

  2. 解决Safari高版本浏览器中默认禁用第三方COOKIE(含demo)

    前段时间在项目里遇到了一个比较头疼的问题,就是高版本的Safari中默认会阻止第三方cookie,这使得使用Safari浏览器的用户无法按照正常的业务逻辑进行操作. 问题展现 知识点 什么是第三方co ...

  3. 浏览器中F5和CTRL F5的行为区别

    前言 在印象中,浏览器中的F5和刷新按钮是一样的效果,都是对当前页面进行刷新:Ctrl-F5的行为也是刷新页面,但是会清除浏览器缓存,这在前端调试时候会常用.二者真正的区别是什么呢?在stackove ...

  4. 【转】浏览器中F5和CTRL F5的行为区别

    原文地址:http://www.cnblogs.com/jiji262/p/3410518.html 前言 在印象中,浏览器中的F5和刷新按钮是一样的效果,都是对当前页面进行刷新:Ctrl-F5的行为 ...

  5. 在IE浏览器中执行OpenFlashChart的reload方法时无法刷新的解决方法

    由于项目需求,需要在网页上利用图表展示相关数据的统计信息,采用了OpenFlashChart技术.OpenFlashChart是一款开源的以Flash和Javascript为技术基础的免费图表,用它能 ...

  6. 极其简单的用JS在浏览器中创建下载文件的方法

    有这样一个需求,在js中动态创建一个页面,然后下载该页面为word文档,研究了一上午,最后发现实现起来如此简单. 在js中创建如下方法:(直接复制即可) function downloadFile(f ...

  7. <input/>标签在 苹果浏览器中 默认的有圆角

    解决方法: input{ border-radius:0; -webkit-border-radius:0; }

  8. 改变浏览器页面默认滚动条样式scrollbar

    scrollbar-3d-light-color 设置或检索滚动条亮边框颜色scrollbar-highlight-color 设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色sc ...

  9. ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法

    一. 运行环境: iphone所有机型的qq浏览器,safari浏览器,微信内置浏览器(qq浏览器内核)等. 二. 异常现象: 1. 大幅度上下滑动h5页面,然后停止滑动,有时候会影响到页面滚动,如局 ...

随机推荐

  1. poj 3122

    Pie Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10309   Accepted: 3651   Special Ju ...

  2. 1.5 Python基础知识 - while循环

    在我们生活中有很多反复要做的事情,或者动作,我们称之为循环.在开发程序中也会有循环的事情要去做,就是需要反复的去执行某个代码,或者反复进行某种演算,直到达到某种条件的时候才会停止.在Python中我们 ...

  3. 如何使用 PyCharm 将代码上传到GitHub上(详细图解)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一丶说明 测试条件:需要有GitHub账号以及在本地安装了Git工具,无论是Linux环境还是Windows都是一样的 如果还没有 ...

  4. set_fix_multiple_port_nets

    set_fix_multiple_port_nets   -all    -buffer_constants 加上这个命令之后 综合之后的网表就不会出现assign语句 否则会出现

  5. Tomcat基础配置和高级配置

    **********  第一部分 Tomcat基础配置   *********** 一.Apatch Tomcat 在win下配置 大部分转载自:http://blog.csdn.net/liuhao ...

  6. orabbix 报错No suitable driver found for

     orabbix报错如下:   2018-07-11 14:35:20,119 [main] ERROR Orabbix - Error on Configurator for database qa ...

  7. wepy小程序实现选项卡

    先上效果: 本文是基于前面几篇文章: 使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 使用wepy开发微信小程序商城第三篇:购物车(布局篇) ...

  8. LA 4329 - Ping pong 树状数组(Fenwick树)

    先放看题传送门 哭瞎了,交上去一直 Runtime error .以为那里错了. 狂改!!!!! 然后还是一直... 继续狂改!!!!... 一直.... 最后发现数组开小了.......... 果断 ...

  9. Java 接口中定义抽象方法有什么意义

    接口方法声明只能是public abstract的,所以不管你在声明的时候加不加abstract,都是可以的.Java 8开始,接口还引入了默认方法,也就是可以给接口的方法提供默认的实现,默认方法应当 ...

  10. [NodeJS] Use Now alias for custom sub-domains

    Now is a great way to deploy your node application, but the generated URLs aren't memorable or easil ...