开发者社区> 小麋鹿666> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

前端魔法堂:屏蔽Backspace导致页面回退

简介:
+关注继续查看

 前几天用户反映在录入资料时一不小心错按Backspace键,就会直接回退到是一个页面,导致之前辛辛苦苦录入的资料全部丢失了。哦?居然还有这种情况。下面我们来一起探讨一下吧!

Windows系统下独有的行为

 Windows下的IE、FireFox和Chrome 52之前的浏览器,当焦点不在一个可编辑的元素上时,按Backspace键就会回退到上一个页面,按Shift+Backspace键则会前进到下一个页面。
而Chrome 52以后的浏览器则屏蔽了BackspaceShift+Backspace的上述行为,而是采用Alt+Left实现回退和Alt+Right实现前进。如果想恢复Backspace回退,则需要安装Go Back With Backspace的Extension才行。
对于FireFox而言,我们可以设置BackspaceShift+Backspace的行为。

  1. 在地址栏输入about:config
  2. 在搜索框输入browser.backspace_action,然后设置项目值即可。有3个可选项
    0,表示BackspaceShift+Backspace的行为对应页面回退和前进(Windows下的默认值)
    1,表示BackspaceShift+Backspace的行为对应页面向下滚动和向上滚动
    2或其他值,表示不响应BackspaceShift+Backspace(Ubuntu16下的默认值)

注意:Linux和OS X下的浏览器按BackspaceShift+Backspace不会触发页面的回退和前进。

如何应对

方案一:页面跳转时弹出二次确认

 通过beforeunload事件实现页面跳转时弹出二次确认模态窗,让用户有后悔的机会。但会截断其他正常跳转的操作流畅性,在确实没有办法时才使用!

方案二:直接屏蔽

 屏蔽BackspaceShift+Backspace的默认行为,仅当焦点落在可编辑区域中时才暂时取消屏蔽。
那么哪些算是能获得焦点的可编辑区域呢?就下面这些咯!!

input[type=text]:not([readonly])
input[type=password]:not([readonly])
input[type=number]:not([readonly])
input[type=email]:not([readonly])
input[type=url]:not([readonly])
input[type=search]:not([readonly])
input[type=tel]:not([readonly])
textarea:not([readonly])
[contenteditable]:not([readonly])

就是说当焦点落在上述符合规则的元素上时,按BackspaceShift+Backspace的默认行为就不是页面跳转,因此不用屏蔽掉。

附加功能

 现在我们的目的是页面不会因为用户误操作而刷新,导致页面数据丢失。这里有两个组合键同样会的导致页面刷新

  1. ctrl+r刷新当前页面,可被阻止;
  2. ctrl+w关闭当前窗体或标签页,无法阻止。

代码时间.js

    ;window.nobsgb || (function(exports){
                var started = false
                exports.start = function(){started = true}
                exports.stop = function(){started = false}

        var KEYCODE = {
            BACKSPACE: 8,
            R: 82
        }
        // 判断type是否不受阻止
        var isEscapableType = function(rEscapableTypes){
            return function(type){
                return rEscapableTypes.test(type)
            }
        }(/text|textarea|tel|email|number|search|password|url/i)
        // 判断标签是否不受阻止
        var isEscapableTag = function(rEscapableTag){
            return function(tag){
                return rEscapableTag.test(tag)
            }
        }(/input|textarea/i)
        // 判断是否设置为content editable
        var isContentEditable = function(el){
            return el.isContentEditable
        }
        // 判断是否为不受阻止的Backspace
        var isEscapableBackspace = function(el){
            return or(isEscapableTag(el.tagName)
                      && 
                      or(!('type' in el)
                         , ('type' in el) && isEscapableType(el.type) && !el.readOnly)
                      , isContentEditable(el))
        }
        var isCtrlR = function(e, keycode){
            return e.ctrlKey && KEYCODE.R === keycode
        }
        var isArray = function(x){
            return /Array/.test(Object.prototype.toString.call(x))
        }
        
        var getEvt = function(e){
            return e || window.event
        }
        var getTarget = function(e){
            return e.target || e.srcElement
        }
        var getKeycode = function(e){
            return e.keyCode || e.which
        }
        var preventDefault = function(e){
            e.preventDefault && e.preventDefault()
            e.returnValue = false
            return false
        }
        var listen = function(listen){
            return function(evtNames, handler){
                if (!isArray(evtNames)){
                    evtNames = [evtName]
                }
                var i = 0
                  , len = evtNames.length
                for (; i < len; ++i){
                    listen(evtNames[i], handler)
                }
            }
        }(function(evtName, handler){
            if (or(document['addEventListener'] && (document['addEventListener'].apply(document, arguments) || true)
                   , document['attachEvent'] && (document['attachEvent'].apply(document, arguments) || true))){
                document['on'+evtName] = handler
            }
            
        })
        
        var or = function(){
            var ret = false
              , i = 0
              , len = arguments.length
            for (; !ret && i < len; ++i){
                ret = ret || arguments[i]
            }
            return ret
        }
        var handler = function(e){
                        if (!started) return true
            var evt = getEvt(e)
              , el = getTarget(evt)
              , keyCode = getKeycode(evt)

            if (or(KEYCODE.BACKSPACE === keyCode && !isEscapableBackspace(el)
                  , isCtrlR(evt, keyCode))){
                return preventDefault(evt)
            }
        }
        
        listen(['keydown'], handler)
    }(window.nobsgb = {}))

代码时间.cljs

core.cljs

(ns nobsgb.core
  (:require [nobsgb.dom :as dom]
            [nobsgb.pred :as pred]))

(def started false)
(defn ^:export start []
  (set! started true))
(defn ^:export stop []
  (set! started false))

(defn handler
  "keydown事件响应函数"
  [e]
  (when started
    (let [evt (dom/get-evt e)
          el (dom/get-el evt)
          key-code (dom/get-key-code evt)
          ctrl-key (dom/get-ctrl-key evt)
          read-only (dom/get-read-only el)
          type (dom/get-type el)
          content-editable (dom/get-content-editable el)
          tag (dom/get-tag el)]
      (if-not
        (pred/escapable?
          key-code read-only type tag content-editable ctrl-key)
        (dom/prevent-default evt)
        true))))

(defonce init
  (#(dom/listen! js/document "keydown" handler)))

dom.cljs

(ns nobsgb.dom)

(defn get-evt
  [e]
  (if (some? e) e (.event js/window)))

(defn get-el
  [e]
  (let [el (.-target e)]
    (if (some? el) el (.-srcElement e))))

(defn get-key-code
  [e]
  (.-keyCode e))

(defn get-ctrl-key
  [e]
  (.-ctrlKey e))

(defn get-read-only
  [el]
  (-> el (aget "readOnly") js/Boolean))

(defn get-type
  [el]
  (let [type (.-type el)]
    (if (some? type) type "")))

(defn get-tag
  [el]
  (.-tagName el))

(defn get-content-editable
  [el]
  (.-isContentEditable el))

(defn prevent-default
  [e]
  (if (some? (.-preventDefault e))
    (do
      (.preventDefault e)
      (set! (.-returnValue e) false)
      false)
    true))

(defn listen!
  [el evt-name handler]
  (cond
    (fn? (.-addEventListener el)) (.addEventListener el evt-name handler)
    (fn? (.-attachEvent el))      (.attachEvent el (str "on" evt-name) handler)
    :else (aset el (str "on" evt-name) handler)))

pred.cljs

(ns nobsgb.pred)
;;;; 断言

(defonce ^:const KEYCODES
  {:backspace 8
   :r 82})

(defn matches-key?
  "是否匹配指定键码"
  [indicated-key-code key-code]
  (= indicated-key-code key-code))

(def ^{:doc "是否为退格键"}
  backspace?
  (partial matches-key? (:backspace KEYCODES)))

(def ^{:doc "是否为字母R键"}
  r?
  (partial matches-key? (:r KEYCODES)))

(defn with-ctrl?
  "是否在按ctrl的基础上按其他键"
  [ctrl-key]
  (or (= ctrl-key "1")
      (true? ctrl-key)))

(defn ctrl+r?
  "是否为ctrl+r"
  [ctrl-key key-code]
  (and (with-ctrl? ctrl-key)
       (r? key-code)))
(def not-ctrl+r? (complement ctrl+r?))

(defn escapable-type?
  "是否为可跳过的type属性"
  [type]
  (some?
    (some->> type
      (re-matches #"(?i)text|password|tel|number|email|search|url"))))

(defn escapable-tag?
  "是否为可跳过的tag"
  [tag]
  (some?
    (some->> tag
      (re-matches #"(?i)input|textarea"))))

(def ^{:doc "是否设置为可编辑元素"}
  content-editable? identity)

(def ^{:doc "是否设置为只读"}
  read-only? identity)
(def writable? (complement read-only?))

(defn escapable-backspace?
  [key-code read-only type tag content-editable]
  (and (backspace? key-code)
       (writable? read-only)
       (or (escapable-type? type)
           (escapable-tag? tag)
           (content-editable? content-editable))))

(defn escapable?
  [key-code read-only type tag content-editable ctrl-key]
  (or
    (and (not-ctrl+r? ctrl-key key-code)
         (not (backspace? key-code)))
    (escapable-backspace? key-code read-only type tag content-editable)))

总结

 尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/6890699.html ^_^肥仔John

如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!

posted @ 2017-05-23 08:27 ^_^肥仔John 阅读(803) 评论(2) 编辑 收藏
  
#1楼 2017-05-24 09:46 笑对当空  
大佬能否科普下cljs...
  
#2楼[楼主]37002182017/5/24 23:31:51 2017-05-24 23:31 ^_^肥仔John  
@ 笑对当空
呵呵,我也刚学了两周而已
http://pic.cnblogs.com/face/347002/20141205140116.png

公告

 
本文转自^_^肥仔John博客园博客,原文链接:http://www.cnblogs.com/fsjohnhuang/p/6890699.html,如需转载请自行联系原作者
 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端基础向~封装Axios优化页面Loading效果
前端基础向~封装Axios优化页面Loading效果
0 0
给页面写一个炫酷的时钟特效【web前端】
给页面写一个炫酷的时钟特效【web前端】
0 0
前端禁止复制页面上的文字内容
前端禁止复制页面上的文字内容
0 0
前端项目实战132-前端打印页面样式渲染
前端项目实战132-前端打印页面样式渲染
0 0
前端工作总结195-vue带参数跳转其他页面
前端工作总结195-vue带参数跳转其他页面
0 0
前端设置页面字体尺寸跟随屏幕大小而进行变化
前端设置页面字体尺寸跟随屏幕大小而进行变化
0 0
「前端技巧总结」多个页面的操作聚合到某个页面的实现方案
用技术实现梦想,用梦想打开前端技术之门。分享我在日常开发中总结的前端技巧,今天是多个页面的操作聚合到某个页面的实现方案。
0 0
「趣学前端」页面上吸顶的效果是怎么做到的
用技术实现梦想,用梦想打开创意之门。为了给不懂技术的朋友讲解日常开发中怎么实现网页的效果,我准备出一个系列。
0 0
「趣学前端」为什么有的页面背景颜色是渐变的
用技术实现梦想,用梦想打开创意之门。为了给不懂技术的朋友讲解日常开发中怎么实现网页的效果,我准备出一个系列。
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
万物互联语音交互从端开始——前端处理从技术到商业
立即下载
2022 前端技术趋势解读
立即下载
智能前端技术与实践
立即下载