IE6 彈出Iframe層中的文本框“經(jīng)?!睙o法獲得輸入焦點
公司W(wǎng)EB項目要求是必須兼容FF3,IE6/7/8。本文所述為IE6下的一個BUG.
項目里面寫了一個自己封裝的彈出層,原理是先動態(tài)添加一個遮罩層,再動態(tài)添加一個DIV(Table)層(做彈出層的PNG半透明邊框效果),DIV里面動態(tài)添加一個IFrame,這個Iframe頁面指向一個現(xiàn)存的HTM文件。
如果這個HTM文件中,包含文本輸入框這樣的一些表單元素,在IE6下就會出婁子了。
測試組的人說了,彈出層打開后,“經(jīng)?!睙o法獲取文本框的焦點,就是鼠標點文本框無法獲取焦點并顯示輸入標記,仿佛被什么透明層給蓋住了。但有時是正常的,可謂間歇性精神障礙。有的機子上百分之五十的幾率出現(xiàn),有的機子上百分之三十左右的幾率出現(xiàn)。
少不了得做一番測試和分析了。
經(jīng)我在虛擬機IE6測試,也發(fā)現(xiàn)的確如測試組的人所說。
我確信不可能有多余的覆蓋層,因為除文本框之外,它周圍的任何文字都可以正常的用鼠標選中,它周圍的任何元素包括這個文本框本身也能響應(yīng)onclick事件,只是無論怎么點,都無法獲取輸入焦點。(文本框沒有設(shè)置readOnly或者disabled)
但是,某些小動作就可以讓它們恢復正常,比如在這個Iframe里右鍵刷新一下,或者是在這個Iframe里按'TAB'鍵將焦點切換到任何一個文本框,這時,所有的文本框都可以用點擊正常獲得焦點了。還真是變態(tài)!
咱總不能說這是IE6的BUG我們程序無法解決吧,領(lǐng)導是不聽這話的。
經(jīng)過一番努力,還是有了解決方案。
我發(fā)現(xiàn),手動調(diào)用一下任何一個(通常是第一個)文本框的focus()方法就可以讓所有的文本框恢復神智了。于是寫了一個公共腳本,在Iframe內(nèi)的頁面末尾,獲取第一個文本框并調(diào)用其focus(),經(jīng)測百來次,再沒碰見無法獲取焦點的情況,問題解決。
下面是網(wǎng)友回復:
彈出的那個標簽是<a />標簽吧?
換成<span />標簽似乎就OK了
相關(guān)文章
微信小程序結(jié)合mock.js實現(xiàn)后臺模擬及調(diào)試
這篇文章主要介紹了微信小程序結(jié)合mock.js實現(xiàn)后臺模擬及調(diào)試,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-03-03JavaScript中的undefined學習總結(jié)
這篇文章主要是對JavaScript中的undefined進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11JavaScript實現(xiàn)兩個select下拉框選項左移右移
這篇文章主要介紹了JavaScript實現(xiàn)兩個select下拉框選項左移右移功能,js實現(xiàn)下拉框元素互相移動,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03ZeroClipboard插件實現(xiàn)多瀏覽器復制功能(支持firefox、chrome、ie6)
Zero Clipboard 利用透明的Flash讓其漂浮在復制按鈕之上,這樣其實點擊的不是按鈕而是Flash ,這樣將需要的內(nèi)容傳入Flash,再通過Flash的復制功能把傳入的內(nèi)容復制到剪貼板2014-08-08