記錄下前段時(shí)間的項(xiàng)目遇到的一個(gè)IE下backSpace跳轉(zhuǎn)的問題吧。。。
在iE瀏覽器下瀏覽同一個(gè)窗口內(nèi)的多個(gè)頁面剿牺，如果你按下backSpace鍵企垦，它默認(rèn)會幫你返回上一個(gè)頁面。
因?yàn)轫?xiàng)目中用到有readOnly狀態(tài)的輸入框晒来，而且IE竟然還還讓它獲得焦點(diǎn)钞诡，（Chrome瀏覽器下是不可以獲得焦點(diǎn)的，可以試試看哦）這樣就給用戶一種可以修改值的錯覺湃崩，然而不是荧降，你按下回格鍵，它給你跳轉(zhuǎn)畫面了攒读，So,為了提升用戶的使用體驗(yàn)朵诫，要禁止這種行為。
先看下圖吧薄扁，這是IE下的效果剪返，如果你是客戶废累，你覺得能改值嘛，肯定想試試的吧
貼下代碼吧：
function handleInputReadOnlyJumpifIE() {
? ? springfield.require('IS_IE');
? ? if (!springfield.IS_IE) {
? ? ? return;
? ? }
? ? $('form').on('keydown keypress', function() {
? ? ? var event = window.event;
? ? ? var target = event.srcElement;
? ? ? if ( event.keyCode != 8 ) {
? ? ? ? ? return;
? ? ? }
? ? ? if ( (target.matches('input') || target.matches('textarea') ) && target.readOnly == true ) {
? ? ? ? return false;
? ? ? }
? ? })
? }
首先整理下思路脱盲，分幾個(gè)步驟
1.既然是IE下才有的行為邑滨，那么只需要判斷是否在IE瀏覽器下運(yùn)行，如果是钱反，禁止其行為就OK了掖看。代碼中的?springfield.IS_IE 其實(shí)是內(nèi)部封裝的判斷IE的方法，至于怎么判斷瀏覽器面哥，可以百度下哎壳。
2.監(jiān)聽事件觸發(fā)，做相應(yīng)的處理幢竹。因?yàn)檫@些輸入框都是在表單內(nèi)的耳峦，所以我用JQ監(jiān)聽form的 keydown,和keypress 事件。做了一系列的判斷焕毫。其中matches()方法蹲坷，有兼容性問題，不過還好公司的代碼庫有做了相關(guān)的polyfill,用起來很方便邑飒。如果不用這個(gè)循签，使用nodeName()方法也可以的。
我這里只是禁掉了input和textarea 標(biāo)簽下的跳轉(zhuǎn)行為疙咸，因?yàn)槔洗笳f县匠，說不定有些客戶會喜歡IE下的跳轉(zhuǎn)功能呢。撒轮。乞旦。所以畫面上其他地方使用還是可以跳轉(zhuǎn)的。
