ctrl+s

改变浏览器中默认的ctrl+s方法

在一般的情况下,我们在浏览网页的时候按下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()//这个方法阻止元素发生默认的行为

[github中的源代码][1]
[1]: https://github.com/liguoqinjim/learnWeb/tree/master/ctrl_s

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,524评论 0 17
  • 说起CTRL-S你会想起什么? 在几乎所有的编辑器中,CTRL-S都是保存文档: 记事本 Notepad++ Su...
    yarving阅读 7,001评论 0 5
  • 《裕语言》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 27,829评论 5 19
  • 日出日落 每天都在继续 看不见阳光的时候 没关系 它依旧温暖如初 尽管落泪 海浪拍打着沙滩上贝壳的声音 日复...
    蓝桉_屿阅读 213评论 0 1
  • 文/井溢 这久忙得几乎没怎么有时间看书了,也没怎么来简书,但是却反常的没觉得内心空落,可能生活充实的同时...
    井溢阅读 165评论 0 3