javascript focus function not working as expected

Question

I am having a jsp/html page.This page is accessed from two different links. It is Menu1-->demo.html page and from Menu2-->demo.html page(In my case its jsp) In the demo.html page I am having a text box which is disabled by default.

<input class="mytextinputtextField" type="text" id="countryOfOrigin"
readonly style="background-color:#DCDCDC"   />

Now when the demo.html page is accessed from Menu2 , I am checking it using a hidden parameter and again enabling the text box and setting the focus on the text box.

if(document.getElementById("submenu_name").value=="PM")
{
   document.getElementById("countryOfOrigin").focus();
}

The field is enable and the cursor is visible but if I type the text is not typed in the text box. I need to click on the text box to enter the text. I think it is because of the disabled and again enabling the field . Please can any one help me to be able to type in the text box on the focus event from javascript. I am not using JQuery and the browser is I.E 6

document.getElementById("countryOfOrigin").readOnly = false; — Abhijit C, Mar 04 '13 at 13:08
This is one of those attributes that is there, or not there as it becomes a "property" of the element. try `readonly="fred"` and you see, it still is read only :) as it is the "presence" of the property that drives its functionality. — Mark Schultheiss, Mar 04 '13 at 13:37
I just debug it, I found that my keyup event is fired correctly for each keypress...but its not getting displayed — Abhijit C, Mar 04 '13 at 13:51

score 0 · Answer 1 · answered Mar 04 '13 at 13:12

0

Try this :

document.getElementById("countryOfOrigin").removeAttribute('readOnly');

jQuery version :

jQuery('#countryOfOrigin').removeAttr('readOnly');

answered Mar 04 '13 at 13:12

score 0 · Answer 2 · answered Mar 04 '13 at 13:30

0

Have you tried removing the attribute?

document.getElementById("countryOfOrigin").Attributes.Remove("readonly");

or

document.getElementById("countryOfOrigin").removeAttribute("readonly");

answered Mar 04 '13 at 13:30

Jehanzeb.Malik

3,332
4
25
41

score 0 · Answer 3 · answered Mar 05 '13 at 14:08

Thank you for your help. I hav found solution or may say work around. I am pasting the code which may be useful for others

if(document.getElementById("submenu_name").value=="PM")
{
 document.getElementById("countryOfOrigin").focus();
 document.getElementById("countryOfOrigin").select();

}

score -1 · Answer 4 · edited Nov 23 '13 at 00:16

-1

Here is an unofficial solution, we have to use the setTimeout() function to delay the focus() execute time.

setTimeout(function() { document.getElementById('myInput').focus(); }, 10);

See http://www.mkyong.com/javascript/focus-is-not-working-in-ie-solution/

edited Nov 23 '13 at 00:16

BenMorel

34,448
50
182
322

answered Mar 04 '13 at 12:53

JoDev

6,633
1
22
37

.I tried this,but not working. Its same its sets the focus but when I type its not getting typed. – Abhijit C Mar 04 '13 at 13:04
Use element.disabled instead of readOnly. And if it doesn't work, don't disable the input, but blur the field onfocus if you d'ont want the input to be enabled. – JoDev Mar 04 '13 at 13:15
3

Be aware that `disabled` behaves not the same way as `readonly` : [check here](http://stackoverflow.com/questions/7730695/whats-the-difference-between-disabled-disabled-and-readonly-readonly-for-te) – Mar 04 '13 at 13:27
And for the second idea, i think it would be a working compromise. – JoDev Mar 04 '13 at 16:19

javascript focus function not working as expected

4 Answers4