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

前言

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

Windows系统下独有的行为

Windows下的IE、FireFox和Chrome 52之前的浏览器，当焦点不在一个可编辑的元素上时，按Backspace键就会回退到上一个页面，按Shift+Backspace键则会前进到下一个页面。

而Chrome 52以后的浏览器则屏蔽了Backspace和Shift+Backspace的上述行为，而是采用Alt+Left实现回退和Alt+Right实现前进。如果想恢复Backspace回退，则需要安装Go Back With Backspace的Extension才行。

对于FireFox而言，我们可以设置Backspace和Shift+Backspace的行为。

在地址栏输入about:config
在搜索框输入browser.backspace_action，然后设置项目值即可。有3个可选项

0，表示Backspace和Shift+Backspace的行为对应页面回退和前进(Windows下的默认值)

1，表示Backspace和Shift+Backspace的行为对应页面向下滚动和向上滚动

2或其他值，表示不响应Backspace和Shift+Backspace(Ubuntu16下的默认值)

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

如何应对

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

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

方案二：直接屏蔽

屏蔽Backspace和Shift+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])

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

附加功能

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

ctrl+r刷新当前页面，可被阻止;
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