PDA

View Full Version : Cursor focus getting lost in IE. Please help.



kallol
04-04-2007, 09:51 AM
Hi Everyone,

I have a form designed with a table and the table is inside a <div> (Required. Can’t get rid of it). The div has style “height: 100% and scrollable: auto”.

The issue: In IE, let say, the form is bit longer and overflowed the page so the div has got vertical scroll bar. Now I am inserting data in the form.

Inserted the 1st data and press tab to next input and insert the 2nd data.
Now my cursor is in 2nd input type.
Now I would like to see how many data I have to insert and I have drag the scroll bar with mouse and went down and dragged up again to the top to continue inserting data.

Expectation: The cursor should be there where I kept it (i.e. 2nd input type!!)! I can insert/modify the data in 2nd input type or I will press tab to go to the next input and insert the 3rd data in it!! Right!!

But Strange!! :confused: The cursor has been lost from that place. By pressing tab I moved to the top of the page or to the 1st input type.

It’s working as par the expectation in Firefox (for a change:) ).

Observation: while inserting data in any input type, at the time I click on the scroll bar to drag it, the curser getting lost from the input type in IE. But it remains with the input type in Firefox (As expected).
I have noticed 1 thing. It behaves like that way in IE (All versions) if I play with the height any way of the above mentioned “div”. But I have to mention the div height to get auto scroll.

Friends!! It will become a huge accessibility issue for me :mad: . Pleeeeeeease help.

Thanks,
Kallol

jscheuer1
04-04-2007, 11:43 AM
Personally, I don't think this is so much of a problem. What I see as happening is this - You are tabbing along through the inputs. You then remove focus from the inputs by focusing on the scrollbar with the mouse. You now have the choice of tabbing from 0 or refocusing on the desired input using the mouse.

However, if you want help trying to change this behavior, a link to the page would be a big plus.

BTW, height:100% is relatively meaningless. A division ordinarily (unless set otherwise or somehow constrained by a container) should be the height of its content. There is no attribute or style property 'scrollable'. The correct way to get a scroll bar in a division is to set it's style height to less than its content is likely to require, make sure that it's style width is set wide enough that its content can wrap if it is too tall to fit within the height set. Set its style property:


overflow:auto;

mburt
04-10-2007, 10:47 AM
This will keep the focus:

<html>
<head>
<meta>
<title>Untitled Document</title>
<script type="text/javascript">
onload=function() {
var obj = document.getElementsByName("textfield")[0];
obj.onblur = function() {obj.focus()}
}
</script>
</head>
<body>
<div style="height:100&#37;; width:100%; overflow:auto;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<input type="text" name="textfield" /> </td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>1. Click and place the cursor in the above text input. Drag the page down and come back. Now see, cursor is not there.<br><strong>OR</strong><br>2. Click and place the cursor in the above text input. Just click on the scroll bar and see the cursor will disappear from the input type.<br><br>Workimg fine in Firefox.
<p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p>
</td>
</tr>
</table>
</div>
</body>
</html>

jscheuer1
04-10-2007, 11:49 AM
Considering that only one object on a page, at times even only one object on the desktop may have focus, I would expect that this approach would cause more problems than it would fix. If the problem is only in one type of browser, and the solution works without causing that browser to exhibit other problems, other browsers should be shielded from the solution.