IE6 彈出Iframe層中的文本框“經(jīng)?!睙o法獲得輸入焦點(diǎn)
公司W(wǎng)EB項(xiàng)目要求是必須兼容FF3,IE6/7/8。本文所述為IE6下的一個(gè)BUG.
項(xiàng)目里面寫了一個(gè)自己封裝的彈出層,原理是先動(dòng)態(tài)添加一個(gè)遮罩層,再動(dòng)態(tài)添加一個(gè)DIV(Table)層(做彈出層的PNG半透明邊框效果),DIV里面動(dòng)態(tài)添加一個(gè)IFrame,這個(gè)Iframe頁(yè)面指向一個(gè)現(xiàn)存的HTM文件。
如果這個(gè)HTM文件中,包含文本輸入框這樣的一些表單元素,在IE6下就會(huì)出婁子了。
測(cè)試組的人說了,彈出層打開后,“經(jīng)?!睙o法獲取文本框的焦點(diǎn),就是鼠標(biāo)點(diǎn)文本框無法獲取焦點(diǎn)并顯示輸入標(biāo)記,仿佛被什么透明層給蓋住了。但有時(shí)是正常的,可謂間歇性精神障礙。有的機(jī)子上百分之五十的幾率出現(xiàn),有的機(jī)子上百分之三十左右的幾率出現(xiàn)。
少不了得做一番測(cè)試和分析了。
經(jīng)我在虛擬機(jī)IE6測(cè)試,也發(fā)現(xiàn)的確如測(cè)試組的人所說。
我確信不可能有多余的覆蓋層,因?yàn)槌谋究蛑?,它周圍的任何文字都可以正常的用鼠?biāo)選中,它周圍的任何元素包括這個(gè)文本框本身也能響應(yīng)onclick事件,只是無論怎么點(diǎn),都無法獲取輸入焦點(diǎn)。(文本框沒有設(shè)置readOnly或者disabled)
但是,某些小動(dòng)作就可以讓它們恢復(fù)正常,比如在這個(gè)Iframe里右鍵刷新一下,或者是在這個(gè)Iframe里按'TAB'鍵將焦點(diǎn)切換到任何一個(gè)文本框,這時(shí),所有的文本框都可以用點(diǎn)擊正常獲得焦點(diǎn)了。還真是變態(tài)!
咱總不能說這是IE6的BUG我們程序無法解決吧,領(lǐng)導(dǎo)是不聽這話的。
經(jīng)過一番努力,還是有了解決方案。
我發(fā)現(xiàn),手動(dòng)調(diào)用一下任何一個(gè)(通常是第一個(gè))文本框的focus()方法就可以讓所有的文本框恢復(fù)神智了。于是寫了一個(gè)公共腳本,在Iframe內(nèi)的頁(yè)面末尾,獲取第一個(gè)文本框并調(diào)用其focus(),經(jīng)測(cè)百來次,再?zèng)]碰見無法獲取焦點(diǎn)的情況,問題解決。
下面是網(wǎng)友回復(fù):
彈出的那個(gè)標(biāo)簽是<a />標(biāo)簽吧?
換成<span />標(biāo)簽似乎就OK了
相關(guān)文章
JavaScript對(duì)象訪問器Getter及Setter原理解析
這篇文章主要介紹了JavaScript對(duì)象訪問器Getter及Setter原理解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
js window對(duì)象屬性和方法相關(guān)資料整理
這篇文章主要介紹了js window對(duì)象屬性和方法相關(guān)資料整理,需要的朋友可以參考下2015-11-11
利用用JS實(shí)現(xiàn)一個(gè)實(shí)時(shí)小鬧鐘
天我們來聊聊如何使用JS來創(chuàng)建一個(gè)實(shí)時(shí)的小鬧鐘,這個(gè)小鬧鐘十分的有趣,小伙伴們可以運(yùn)行一下,看看跟你電腦上的時(shí)間是否對(duì)的上呢,文章通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
js中string和number類型互轉(zhuǎn)換技巧(分享)
下面小編就為大家?guī)硪黄猨s中string和number類型互轉(zhuǎn)換技巧(分享)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
JS中隊(duì)列和雙端隊(duì)列實(shí)現(xiàn)及應(yīng)用詳解
這篇文章主要介紹了JS中隊(duì)列和雙端隊(duì)列實(shí)現(xiàn)及應(yīng)用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
bootstrap配合Masonry插件實(shí)現(xiàn)瀑布式布局
這篇文章主要為大家詳細(xì)介紹了bootstrap配合Masonry插件實(shí)現(xiàn)瀑布式布局,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
js設(shè)置鼠標(biāo)懸停改變背景色實(shí)現(xiàn)詳解
這篇文章主要介紹了js設(shè)置鼠標(biāo)懸停改變背景色實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下2019-06-06
js計(jì)算系統(tǒng)當(dāng)前日期是星期幾的方法
這篇文章主要為大家詳細(xì)介紹了js計(jì)算系統(tǒng)當(dāng)前日期是星期幾4種方法,需要的朋友可以參考下2016-07-07
JavaScript設(shè)置表單上傳時(shí)文件個(gè)數(shù)的方法
這篇文章主要介紹了JavaScript設(shè)置表單上傳時(shí)文件個(gè)數(shù)的方法,可實(shí)現(xiàn)動(dòng)態(tài)增加及刪除表單上傳按鈕的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08

