This post was originally made on the Assanka blog. Assanka was acquired by the Financial Times in January 2012, and became what is now FT Labs. Learn more.
Do you ever find that sometimes when you try and type into a textbox, there is no cursor there, but it still accepts your input and the text appears as if there is a cursor? I came across this problem in Firefox 3 and searching online revealed only solutions to an earlier problem that affected Firefox 2, in which the overflow configuration of the INPUT’s containing element would affect whether the cursor appeared in the input or not.
But this was clearly not my problem, and various sources suggested that this had in any case been fixed for Firefox 3. I discovered that my problem was rather simpler. If you disable an element that has focus, and then re-enable it, you don’t get the cursor back.
Solution: blur (remove focus from) the element before you disable it. Those sources that do refer to this specific problem tend to suggest that you focus a different element before you disable the text box. But this is not necessary – you can just blur the element that has focus and leave the page with nothing focused.
Problem test case
Try clicking and typing in the field below – if your browser exhibits this problem, the text cursor will not appear. If it does, then your browser does not have this problem.
This demo has a single text field which, when you click into it, is briefly disabled, and then enabled again. The disabling of the field while it has focus triggers this problem, so the text cursor does not appear (but you can still type into the field!).
Solution test case
Now try typing in this field – the cursor should appear consistently.
This demo still briefly disables and re-enables the text field when it gets focus, but this time it blurs it right before it’s disabled, then focuses it again after re-enabling it. The result is that when you place your mouse cursor in the field to manually give it focus, the text cursor appears as normal.