国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端魔法堂:屏蔽Backspace導致頁面回退

plus2047 / 3311人閱讀

摘要:而以后的瀏覽器則屏蔽了和的上述行為,而是采用實現回退和實現前進。附加功能現在我們的目的是頁面不會因為用戶誤操作而刷新,導致頁面數據丟失。這里有兩個組合鍵同樣會的導致頁面刷新刷新當前頁面,可被阻止關閉當前窗體或標簽頁,無法阻止。

前言

?前幾天用戶反映在錄入資料時一不小心錯按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的行為。

在地址欄輸入about:config

在搜索框輸入browser.backspace_action,然后設置項目值即可。有3個可選項
0,表示BackspaceShift+Backspace的行為對應頁面回退和前進(Windows下的默認值)

1,表示BackspaceShift+Backspace的行為對應頁面向下滾動和向上滾動
2或其他值,表示不響應BackspaceShift+Backspace(Ubuntu16下的默認值)

注意:Linux和OS X下的瀏覽器按BackspaceShift+Backspace不會觸發頁面的回退和前進。

如何應對 方案一:頁面跳轉時彈出二次確認

?通過beforeunload事件實現頁面跳轉時彈出二次確認模態窗,讓用戶有后悔的機會。但會截斷其他正常跳轉的操作流暢性,在確實沒有辦法時才使用!

方案二:直接屏蔽

?屏蔽BackspaceShift+Backspace的默認行為,僅當焦點落在可編輯區域中時才暫時取消屏蔽。
那么哪些算是能獲得焦點的可編輯區域呢?就下面這些咯?。?/p>

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的默認行為就不是頁面跳轉,因此不用屏蔽掉。

附加功能

?現在我們的目的是頁面不會因為用戶誤操作而刷新,導致頁面數據丟失。這里有兩個組合鍵同樣會的導致頁面刷新

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? tpye) 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/fsjohn... ^_^肥仔John

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83153.html

相關文章

  • 前端魔法:解秘FOUC

    摘要:前言對于問題多多的,瀏覽器樣式閃爍是一個不可忽視的話題,但對于的瀏覽器就不用理會了嗎下面嘗試較全面地解密。示例說明,不管在哪里引入,在頁面的所有下載完成前,整個頁面將不會被渲染。 前言 ?對于問題多多的IE678,FOUC(flash of unstyled content)——瀏覽器樣式閃爍是一個不可忽視的話題,但對于ever green的瀏覽器就不用理會了嗎?下面嘗試較全面地解密F...

    Dean 評論0 收藏0
  • 前端魔法:解秘FOUC

    摘要:前言對于問題多多的,瀏覽器樣式閃爍是一個不可忽視的話題,但對于的瀏覽器就不用理會了嗎下面嘗試較全面地解密。示例說明,不管在哪里引入,在頁面的所有下載完成前,整個頁面將不會被渲染。 前言 ?對于問題多多的IE678,FOUC(flash of unstyled content)——瀏覽器樣式閃爍是一個不可忽視的話題,但對于ever green的瀏覽器就不用理會了嗎?下面嘗試較全面地解密F...

    MRZYD 評論0 收藏0
  • 前端魔法:解秘FOUC

    摘要:前言對于問題多多的,瀏覽器樣式閃爍是一個不可忽視的話題,但對于的瀏覽器就不用理會了嗎下面嘗試較全面地解密。示例說明,不管在哪里引入,在頁面的所有下載完成前,整個頁面將不會被渲染。 前言 ?對于問題多多的IE678,FOUC(flash of unstyled content)——瀏覽器樣式閃爍是一個不可忽視的話題,但對于ever green的瀏覽器就不用理會了嗎?下面嘗試較全面地解密F...

    VEIGHTZ 評論0 收藏0
  • 前端魔法——異常不僅僅是try/catch

    摘要:我打算分成前端魔法堂異常不僅僅是和前端魔法堂調用棧,異常實例中的寶藏兩篇分別敘述內置自定義異常類,捕獲運行時異常語法異常網絡請求異常事件,什么是調用棧和如何獲取調用棧的相關信息。 前言 ?編程時我們往往拿到的是業務流程正確的業務說明文檔或規范,但實際開發中卻布滿荊棘和例外情況,而這些例外中包含業務用例的例外,也包含技術上的例外。對于業務用例的例外我們別無它法,必須要求實施人員與用戶共同...

    bladefury 評論0 收藏0
  • JS魔法:定義頁面的Dispose方法——[before]unload事件啟示錄

    摘要:坑無視和是十分特殊的事件,要求事件處理函數內部不能阻塞當前線程,而卻恰恰就會阻塞當前線程,因此規范中以明確在和中直接無視這幾個方法的調用。 前言 ?最近實施的同事報障,說用戶審批流程后直接關閉瀏覽器,操作十余次后系統就報用戶會話數超過上限,咨詢4A同事后得知登陸后需要顯式調用登出API才能清理4A端,否則必然會超出會話上限。?即使在頁面上增添一個登出按鈕也無法保證用戶不會直接關掉瀏覽器...

    Chiclaim 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<