HTML5, CSS3, jQuery, JSON, Responsive Design...

Disabled fields on Internet Explorer (Updated)

Michael Brown   July 9 2011 05:00:00 PM

Here's an annoyance that I'd not really noticed before: if you disable a field on the web, it appears greyed out on Firefox and Google Chrome, but not on IE. On IE, there's no real indication that field has been disabled at all until you click on it (and nothing happens).  The graphic below shows the difference:



I've tested this right up to IE9, and disabled fields are still not greyed out even there.  This post from the bernzilla site explains the problem in more detail.  (You'll see that I nabbed the above image from them too!)  They also offer a solution, which is to manually style the field's background colour to grey when IE is the browser.

Below is how I've coded the bernizlla solution using jQuery.  Rather than set the field's background colour manually, I thought it would be cleaner to set it in a CSS class and add the class to field when disabling the field.  I can then remove the class when re-enabling the field.

// disabling the field
if($.browser.msie) {$("#MyFieldID").addClass("textFieldDisabled")};
$("#MyFieldID").attr("disabled", "disabled");

// enabling the field again
$("#MyFieldID").removeAttr("disabled");
if($.browser.msie) {$("#MyFieldID").removeClass("textFieldDisabled")};


And here's the class that sets the grey colour:
.textFieldDisabled {
background-color: #D4D0C8   /* light grey */
}


It's a real PITA to have two lines every time that disable/re-enable though.  In theory, it should be possible to extend jQuery to have a new $.disableField() and $.enableField() functions that does the IE colour thing automatically.  That's all a bit beyond my jQuery knowledge at the moment, but I will look into it when I have time.



Update 9 July 2011

As threatened above, I did find the time to investigate the jQuery plugin method and this turned out to be surprisingly easy.  Apart from making the functionality easy to use - one line of code to call it instead of two each time - it also made it easier to customise the functions themselves.

The customisation was required because I discovered that IE's problems without not greying out fields is restricted to input text and textarea fields only - that's plain text and Rich Text fields in Domino parlance.  All other types of fields, such as radio buttons, checkboxes and drop-downs, are correctly greyed out by IE, so my functions don't need to do anything with them.  I use the jQuery's filter() function to ensure that I'm only applying the greying out to input text and textarea fields.

The plugin adds two new jQuery functions: disableField() and enableField().  Because they're jQuery functions, they can be called against any selected collection where you would use a standard jQuery function.

So, here's how you might call it against a single field:
$("#Field1").disableField();



And here's how you might call it against all fields that have a certain class:
$(".allFields").disableField();



Here's the code fot the plug-in itself:
(function( $ ){

$.fn.disableField = function() {
 // Function disables fields by setting their disabled attribute to "disabled".  Additionally, if IE is the browser
 // it will grey out the field by applying the textFieldDisabled CSS class (which must be loaded in the browser
 // separately).  It will only to this latter step for input text fields; other fields - Radio, drop-down etc. - are
 // greyed out by IE automatically.
 if($.browser.msie) {          // only if it's IE do we need to grey it out...
       var $textFieldsOnly = this.filter("input:text");  // ... and then, only for plain text fields.
       $textFieldsOnly.addClass("textFieldDisabled");
 }
 this.attr("disabled", "disabled");
};
$.fn.enableField = function() {
 // Function is reverse of disableField() plug-in (sse above).  Enables fields by removing their disabled attribute.
 // Additionally, if IE is the browser it will grey out the field by removing the textFieldDisabled class
 // (which must be loaded in the browser separately).  It will only to this latter step for input text fields;
 // other fields - Radio, drop-down etc. - are greyed out by IE automatically and so will not have had the
 // disableFieldText CSS class added by disableField().
 this.removeAttr("disabled");
 if($.browser.msie) {
       var $textFieldsOnly = this.filter("input:text");  // ... only for plain text fields.
       $textFieldsOnly.removeClass("textFieldDisabled");
 }
};
})( jQuery );





Comments
No Comments Found

About