在一般的情况下,我们在浏览网页的时候按下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. 关于JS面向对象继承问题

    1.原型继承(是JS中很常用的一种继承方式) 子类children想要继承父类father中的所有的属性和方法(私有+公有),只需要让children.prototype=new father;即可. ...

  2. Android 仿今日头条频道管理(下)(GridView之间Item的移动和拖拽)

    前言 上篇博客我们说到了今日头条频道管理的操作交互体验,我也介绍了2个GridView之间Item的相互移动.详情请參考:Android 仿今日头条频道管理(上)(GridView之间Item的移动和 ...

  3. 【转载】zookeeper数据模型

    [转载请注明作者和原文链接,  如有谬误, 欢迎在评论中指正. ] ZooKeeper的数据结构, 与普通的文件系统极为类似. 见下图: 图片引用自developerworks 图中的每个节点称为一个 ...

  4. 关于Altium Designer的一些设置

    把原理图设置成A4纸张,是为了便于打印机打印出原理图来 原理图一定一定要和pcb图保持一致,这样是为了以后查找错误方便...

  5. 1 Spring Cloud Eureka服务治理(上)

    注:此随笔为读书笔记.<Spring Cloud微服务实战>,想学习Spring Cloud的同伴们可以去看看此书,里面对源码有详细的解读. 什么是微服务? 微服务是将一个原本独立的系统拆 ...

  6. 键盘钩子监测按键后,获取键码及按键名称(MFC)

    LRESULT CALLBACK LowLevelKeyboardProc(int nCode,WPARAM wParam,LPARAM lParam){ if(nCode ==HC_ACTION & ...

  7. GCD 初步学习

    GCD应该是比較牛逼的东西了吧,一时半会应该是操作不好. 在cocoa-china上面有两篇关于GCD的文章.GCD 深入理解(一) GCD 深入理解(二) CSDN荣芳志博客:点击打开链接 我仅仅是 ...

  8. inflate, findViewById与setContentView的区别与联系 分类: H1_ANDROID 2014-04-18 22:54 1119人阅读 评论(0) 收藏

    protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentV ...

  9. Windows Phone 8.1 FilePicker API

    在 Windows Phone 8.1 中,增加了 FilePicker 的方式与文件打交道,最大的亮点在于这种方式不仅可以浏览手机上的文件,还可以浏览符合协议的应用里的文件! 比如点击 OneDri ...

  10. ArcGIS Runtime支持的GP工具列表(转 )

    转自原文 ArcGIS Runtime支持的GP工具列表(转 ) 目前ArcGIS Runtime有两个版本 Basic 版本和Standard版本,而Basic版本不支持Geoprocessing( ...