CODEWITHSUNDEEP
javascriptjqueryvalidationinternet-explorer
Ben
Ben

Reputation: 4319

Blur not working as expected in IE when Focus is returned to sending element

I am doing some JQuery validation where if validation fails I want to prevent the user moving away from the element with the validation problem (using $(this).focus().select()). As a bit of user feedback I also want to grey out the other input boxes using CSS. (i.e. all other input boxes are greyed out until the issue is fixed.)

This works fine in Chrome, but in IE it only greys out the next input, not all of them when I return focus to the original input. (If I remove the $(this).focus().select() the styling works as expected, but the cursor is not "locked" to the input.)

How can I ensure consistency across the browsers?

The code I am using is:

$(".TimeEntry").blur(function(){
   if ($(this).val()){
      $('input').not(this).addClass('disabledClass');
      $(this).focus().select();
    } else {
      $('input').not(this).removeClass('disabledClass');
    }
});

(For demo purposes all my "validation" is doing is ensuring there is nothing in the input box. Any entry will fail the validation.)

See https://jsfiddle.net/bdgriffiths/6g4rkcme/4/

Upvotes: 1

Views: 1794

Answers (1)

Red
Red

Reputation: 7299

I do not know why its not working within the IE browser. I tested it different ways, however all failed. I think its a bug in IE.

You can write a workaround however. As discussed above, I created a fiddle for you. It does the same in the IE browser, only in a different way.

See snippet below

$(".TimeEntry").focusout(function(){
   if ($(this).val()){
        // Workaround for IE
        if(MSIE() === 1) {
        // This fixes the `tab` key cant be pressed when disabled.
        $(document).keydown( function() {
          if($(this).val().length < 1) {
            // If length of value smaller than 1 (aka 0) then set disabled false. So the tab key will work again.
            $('input').not(this).prop('disabled', false);
          }
        });
        $('input').not(this).prop('disabled', true);
      } else {
        // For chrome, firefox etc.
        $('input').not(this).addClass('disabledClass');
      }
      
      // Works for all browsers.
      $(this).focus().select();
    } else {
        if(MSIE() === 1) {
        $('input').not(this).prop('disabled', false);
      } else {
        $('input').not(this).removeClass('disabledClass');
      }
    }
}); 

function MSIE() {
    if (navigator.appName == 'Microsoft Internet Explorer' ||  
  !!(navigator.userAgent.match(/Trident/) || 
  navigator.userAgent.match(/rv:11/)) || 
  (typeof $.browser !== "undefined" && $.browser.msie == 1)) {
    
    return 1;
    } else {
    return 0;
  }
}
td {
  width: 100px;
  height: 70px;
}

body {
  font-family: arial;
}

.disabledClass {
  background-color: #eee;
  color: #ccc;
  border: 1px solid #ccc
}

a {
  text-decoration: none;
  color: black;
}

#triangle-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 8px solid red;
  border-bottom: 10px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input class="TimeEntry" id="tb1" style='width:50px' />
    </td>
    <td>
      <input class="TimeEntry" id="tb2" style='width:50px' />
    </td>
    <td>
      <input class="TimeEntry" id="tb3" style='width:50px' />
    </td>
  </tr>
  <tr>
    <td>
      <input class="TimeEntry" id="tb4" style='width:50px' />
    </td>
    <td>
      <input class="TimeEntry" id="tb5" style='width:50px' />
    </td>
    <td>
      <input class="TimeEntry" id="tb6" style='width:50px' />
    </td>
  </tr>
  <tr>
    <td>
      <input class="TimeEntry" id="tb7" style='width:50px' />
    </td>
    <td>
      <input class="TimeEntry" id="tb8" style='width:50px' />
    </td>
    <td>
      <input class="TimeEntry" id="tb9" style='width:50px' />
    </td>
  </tr>
</table>

What I did, is just checking on what browser the user is visiting your website. If its IE make the input field disabled, instead of animating a disabled input field with CSS.

If user is visiting with any other browser, do it the way you already wrote yourself. Which works.

Upvotes: 1

Related Questions