Clever Geek Handbook

IE11 jQuery 'readonly' incompatibility?

The code I am running has no problem in Firefox or Chrome. The user enters text into one text box, tabs to the next and can continue to enter text.

When I launch the webpage in IE11, the user navigates to the next text field and cannot enter anything. The text box needs to be double-clicked before the user can insert anything.

I've looked for this and it seems that sometimes IE will give problems when using some older jQuery (i.e. it prefers 'prop'

before 'attr'

). readonly

Does the code below use the jQuery keyword that IE11 no longer recognizes / accepts?

I am guessing the problem is related to readonly

as it removeClass('ignore')

works as expected.

 //when focus is on textbox 1
  $("#Field1").focus(function() {

        //remove readonly property from textbox 1
         $('#Field1').prop('readonly', false).removeClass('ignore');

          //add readonly property to all other textboxes
         $('#Field2, #Field3, #Field4')
                .prop('readonly', 'readonly').addClass('ignore').val(''); 
});

I am using jQuery 2.1.3

+3


source to share


3 answers


Try to change:

$('#Field1').attr('readonly', false).removeClass('ignore');

To:

$('#Field1').removeAttr('readonly').removeClass('ignore');


readonly is a boolean attribute and according to the HTML standard :

The presence of a boolean attribute on an element represents a true value, and the absence of an attribute represents a false value.

If the attribute is present, its value must be the empty string, or a value that is an ASCII case-insensitive match for the attribute canonical name, without leading or trailing spaces.

So, in this case, setting it to false has no effect and you want to remove this attribute entirely.

+1


source


Use a boolean value for the property value, not a string



$('#Field2, #Field3, #Field4')
            .prop('readonly', true).addClass('ignore').val('');
+1


source


I used Focusin () function in jquery side with Id. When I click on the textbox, we remove the readony attribute as shown below:

HTML :

<input type="text" id="txtCustomerSearch" readonly class="customer-search" placeholder="Search customer:" maxlength="100" autocomplete="off">

Jquery :

$("#txtCustomerSearch").focusin(function () {
        $(this).removeAttr('readonly');
});

it will work in IE11 and other browsers.

0


source






More articles:


All Articles