CODEWITHSUNDEEP
jqueryinternet-explorer
Johannes Charra
Johannes Charra

Reputation: 29913

Internet explorer onclick->focus not working correctly

I have a function using jQuery

function enableField(fieldID) {
    $("#" + fieldID).removeAttr('disabled').focus().select();
}

that is called from the following code inside an HTML page

    <input id="phone_nr" name="phone"
           type="text" size="30" value="12345"/>

    <a href="javascript:void(0);" 
       onclick="enableField('phone_nr'); return false;">Change</a>

The input field is disabled initially. So the call to the JS method enables it again, then puts the focus on the field and selects the text inside for editing.

Internet explorer (9) doesn't do this properly (all the other browsers do). On clicking the "change" link, nothing seems to happen.

Upvotes: 1

Views: 1958

Answers (2)

sarghir
sarghir

Reputation: 144

Try adding the link onclick handler in the document.ready event:

    $(document).ready(function () {
       $("#mylink").click(function(){
         $("#phone_nr").removeAttr('disabled').focus().select();    
       });
    })

...

    <a href="javascript:void(0);" id="mylink">Change</a>

Upvotes: 0

Sparky
Sparky

Reputation: 98718

<input id="phone_nr" name="phone" type="text" size="30" value="12345"/>
<a href="#" id="mylink">Change</a>

Removed your inline JavaScript and replaced it with this.

$(document).ready(function() {
    $('#myLink').click(function(e) {
        e.preventDefault();
        $('#phone_nr').removeAttr('disabled').focus().select();
    });
});

It's not clear whether you'd have a "Change" link for each field but if you do...

<input id="field0" name="phone" type="text" size="30" value="12345"/>
<a href="#" id="mylink-0">Change</a>

<input id="field1" name="name" type="text" size="30" value="name"/>
<a href="#" id="mylink-1">Change</a>

<input id="field2" name="fax" type="text" size="30" value="12345"/>
<a href="#" id="mylink-2">Change</a>

 

$(document).ready(function() {
    $('a[id|="mylink"]').each(function (i) {
        $(this).click(function(e) {
            e.preventDefault();
            $('#field' + i).removeAttr('disabled').focus().select();
        });
    });
});

Upvotes: 1

Related Questions