在一般的情况下,我们在浏览网页的时候按下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学习笔记 - fgm练习 2-5 - 函数传参 设置div样式

    练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...

  2. Python 极简教程(二)编码工具

    Python 的编码工具很多.目前最流行的是 pycharm,关于 pycharm 的安装使用请参考 PyCharm安装使用教程. 而学习过程中,我觉得最好用的,还是 Python 自带的练习工具 I ...

  3. MySql 中的setAutoCommit方法

    引言 setAutoCommit方法用一句话说就是用来保持事务完整性.一个系统的更新操作可能涉及多张表,这个时候,就须要用多个Sql语句来实现,实际上我认为这个东西就是用来实现事务的. 当我们进行多条 ...

  4. thinkphp事务机制

    thinkphp事务机制 一.总结 下面文章也要看,下面有抛出异常(自己提供错误信息那种) 1.事务机制(原子性):所有的事情都完成了就提交,否则回滚.电商里面用的多,付钱买东西的时候. 2.样例(简 ...

  5. 自己定义View——坑、技巧、调优

    <span style="font-size:14px; font-family: Arial, Helvetica, sans-serif; background-color: rg ...

  6. 【UIL框架】Universal-Image-Loader全然解析(一)之介绍与使用具体解释

    转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50439814 本文出自:[江清清的博客] (一).前言: [好消息] ...

  7. stm32的adc时钟周期,ADC_SampleTime_1Cycles5是多长时间

  8. 计算机图形学(二)输出图元_3_画线算法_2_DDA算法

    DDA算法        数字微分分析仪(digital differential analyzer, DDA)方法是一种线段扫描转换算法.基于使用等式(3.4)或等式(3.5)计算的&x或& ...

  9. client、server端编程

    首先是从main函数开发: int main(itn argc,char* argv[]) { pthread_t thread; int count; int status;         cli ...

  10. MinGW、MinGW-w64 与TDM-GCC 应该如何选择?

    MinGW.MinGW-w64 与TDM-GCC 应该如何选择? https://www.zhihu.com/question/39952667