SoFunction
Updated on 2025-03-01

IE6 pop-up text box in Iframe layer "often" cannot get input focus

The company's WEB project requirements are that it must be compatible with FF3 and IE6/7/8. This article describes a bug under IE6.

The project writes a pop-up layer that is encapsulated by itself. The principle is to dynamically add a mask layer, then dynamically add a DIV (Table) layer (to make the PNG translucent border effect of the pop-up layer), and dynamically add an IFrame in DIV. This Iframe page points to an existing HTM file.

If this HTM file contains some form elements such as text input boxes, it will be a mess under IE6.

The people in the test group said that after the pop-up layer is opened, the focus of the text box is "often" unable to get the focus of the text box, which means that the mouse clicks the text box and displays the input mark, as if it is covered by some transparent layer. But sometimes it is normal, which can be described as an intermittent mental disorder. Some machines have a 50% chance of appearing, while others have a 30% chance of appearing.

It is necessary to do some testing and analysis.

After I tested it on the virtual machine IE6, I also found that it was indeed as the people in the test group said.

I'm sure there is no unnecessary overlay because any text around it can be selected normally with the mouse, any element around it, including this text box itself, can also respond to the onclick event, but no matter how you point it, you can't get the input focus. (The text box is not set to readOnly or disabled)

However, some small actions can restore them to normal, such as right-clicking to refresh in this Iframe, or pressing the 'TAB' key in this Iframe to switch the focus to any text box. At this time, all text boxes can be obtained normally by clicking. Really perverted!

We can't say that this is an IE6 bug that our program cannot solve, the leader will not listen to this.

After some effort, there is still a solution.

I found that manually calling the focus() method of any (usually the first) text box can restore all text boxes to their minds. So I wrote a public script, and at the end of the page in the Iframe, I got the first text box and called its focus(). After more than a hundred tests, I never encountered any situation where I could not get the focus. The problem was solved.