The text box in the pop-up Iframe layer of IE6 'often' fails to obtain the input focus_javascript skills

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

In the project, I wrote a self-encapsulated pop-up layer. The principle is to dynamically add a mask layer first, and then dynamically add a DIV (Table) layer (to make a pop-up layer PNG translucent border effect), an IFrame is dynamically added to the DIV, and this Iframe page points to an existing HTM file.

If this HTM file contains some form elements such as text input boxes, it will cause trouble under IE6.

People in the test group said that after the pop-up layer is opened, the focus of the text box "often" cannot be obtained. That is, the text box cannot obtain focus and display the input mark when the mouse clicks, as if it is covered by some transparent layer. . But sometimes it is normal and can be described as an intermittent mental disorder. Some machines have a 50% chance of appearing, and some machines have a 30% chance of appearing.

It is inevitable to do some testing and analysis.

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

I am sure there is no extra overlay, because except for the text box, any text around it can be selected normally with the mouse, and any element around it including the text box itself can also respond to onclick Event, but no matter how you click it, you can't get the input focus. (The text box is not set to readOnly or disabled)

However, some small actions can make them return to normal, such as right-clicking in this Iframe to refresh, or pressing the 'TAB' key in this Iframe to switch focus. Go to any text box. At this time, all text boxes can obtain focus normally by clicking. What a pervert!

We can’t say that this is a BUG in IE6 that our program can’t solve. The leaders won’t listen to this.

After a lot of hard work, we still have a solution.

I found that manually calling the focus() method of any (usually the first) text box can restore all text boxes to sanity. So I wrote a public script to get the first text box at the end of the page in the Iframe and call its focus(). After testing it hundreds of times, I never encountered a situation where focus could not be obtained, and the problem was solved.

The following is the reply from a netizen:
The tag that pops up is the tag, right?
Replace it with the tag and it seems to be OK