CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorer-11
OscuroAA
OscuroAA

Reputation: 252

IE11 doesn't want to focus on `disabled` element

I'm trying to force text to only be enter-able in one of two text fields.

When one field loses focus I check its value, and if it is not empty I disable the other text field.

Here's an example:

HTML:

<div class="container">
  <label for="textOne">textOne</label>
  <input type="text" id="textOne"/>
</div>
<div class="conatiner">
  <label for="textTwo">textTwo</label>
  <input type="text" id="textTwo"/>
</div>

jQuery:

$("#textOne").on('focusout', function() {
  console.log("focusout::\t"+this.id);
  if( $("#textOne").val() == "") {
    $("#textTwo").prop('disabled', false);
  } else {
    $("#textTwo").prop('disabled', true);
  }
});

$("#textTwo").on('focusout', function() {
  console.log("focusout::\t"+this.id);
  if( $("#textTwo").val() == "") {
    $("#textOne").prop('disabled', false);
  } else {
    $("#textOne").prop('disabled', true);
  }
});

This works just fine in Chrome and Firefox, but it appears that IE11 does not support focus on disabled elements.

The only solution I've found is in this question, which is to use the readonly attribute, instead of the disabled attribute. This isn't a desirable solution for my application.

Is there a way to achieve this in IE11, while still using the disabled attribute?

What is the reason IE11 does not support focus on disabled attributes?

Thanks in advance for any suggestions and answers.

EDIT: here is an example on jsFiddle which, when ran on IE11 will reproduce the issue explained in the post https://jsfiddle.net/ftqbop7a/2/

Upvotes: 1

Views: 2139

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

Simple as that, instead of focusout use the input event:

$("#textOne").on('input', function() {
    if( $.trim($("this").val()) == "") {
    $("#textTwo").prop('disabled', false);
  } else {
    $("#textTwo").prop('disabled', true);
  }
});

$("#textTwo").on('input', function() {
    if( $("#textTwo").val() == "") {
    $("#textOne").prop('disabled', false);
  } else {
    $("#textOne").prop('disabled', true);
  }
});

jsFiddle

To explain: on focusout is too late for IE to get the reference of the last operated input element, while (on)input event will, since it occurs immediately.

Want to simplify your code an WOW your boss?
jsFiddle

var $inp = $("#textOne, #textTwo");
$inp.on("input", function() {
   $inp.not(this).prop("disabled", $.trim(this.value));
});

Upvotes: 2

Related Questions