Tech H8rs 'Standardization' of HTML elements

Posted By

The term 'Standard' can be very open to interpretation at times. This is especially true when it comes to software and computer systems. Take M$ for example, their version of 2008 Office featured an "Open Standard" implementation of a format that surprisingly, no other company implemented or even accepted; they just happened to have "open" in the format name, so it was a standard therefore.

However, this rather brief article is about HTML and its standards; not particularly that OS and browser variations will yield different results with the same code, but this h8 is about something that every browser does similar, AND is part of the standard. The standard I've recently disliked is that of form elements and the usage of the 'readonly' tag. As per W3C's specification:


readonly [CI]
When set for a form control, this boolean attribute prohibits changes to the control.

The readonly attribute specifies whether the control may be modified by the user.

When set, the readonly attribute has the following effects on an element:

* Read-only elements receive focus but cannot be modified by the user.
* Read-only elements are included in tabbing navigation.
* Read-only elements may be successful.



This is extremely useful, but there's one limitation of it... it doesn't support select boxes! This is rather annoying when ie: you want to limit a select box to be changed only via script, but still get submitted with the form. As per the standard, there is no way of achieving this; and thus, even if adding the readonly tag to a select box, you still get no readonly.

[ warning, shameless plug ahead ]

The easiest way to circumvent this is to physically prevent the user from interacting with the component, and the usual method for physically preventing interaction... place something between the two objects. In my case, I ended up creating a plugin for jQuery that will render a semi-transparent div or iframe over the element desired to be readonly. This will prevent the user from clicking on the element. Tabbing to the element is handled by assigning a custom onFocus event, which triggers the blur event for that element immediately, effectively preventing user interaction that way. This method seems to work well on all the browsers that I have tried, including IE6/7, FF3, Safari, and Opera 9/10.