Thursday, August 28, 2008

UI Annoyance: Unselectable text in a disabled form field

A usability annoyance that I've encountered on a few occasions is a disabled field on an desktop or web application form which doesn't allow text in the field to be selected, and therefore, prevents the value in the field from being copy & pasted to another location.  (This side-effect of not allowing a clipboard copy of the field's value may or may not be above and beyond the developer's intention of simply not allowing the contents of the field to be modified).

For example, the web application server WebLogic Server 9 (WLS9) includes a web-based administrative console where database connection strings and other settings for hosted applications can be defined.  In the WLS9 console, one user at a time can obtain a lock on the console, preventing other users from concurrently making conflicting changes; when the current user does not have the lock, all editable fields are disabled.  In this state, field values can't be selected and copied to the clipboard.  This effectively prevents the user from doing things like copying settings from admin console form fields to another WebLogic instance, or copying a hosted application's settings from the console to document them in the application's internal documentation. 

There's no reason that the WLS9 console needed to be coded to prevent clipboard copying of values in this way; after all, the disabled field values are still visible, and the user can always just manually read and retype them elsewhere.  It's just an annoyance for the user to have to do manual retyping of values (such as long, complex database connection strings) when they could be using a clipboard copy to get the values.

HTML form fields: Disabled vs. Readonly

In HTML, an input type="text" field can be set with the attributes disabled or readonly.  The attributes have similar behavior; both prevent the field contents from being modified.  One key difference, though, is that the readonly attribute still allows the value in the field to be selected (and copied to the clipboard); the disabled attribute may prevent the value from being selected and clipboard copied, depending on the client browser's implementation.  (For example, Firefox 3 prevents the value from being selected; Internet Explorer 6 does allow the value to be selected.)

Try dragging with the mouse inside each of these fields, to see what behavior your browser allows:

<input type="text" value="Try selecting this text" readonly> :

<input type="text" value="Try selecting this text" disabled> :

Conclusion

Web application developers, before using the disabled attribute on a text input field on a web form, consider whether your users may ever want to clipboard copy the value in cases when the field is disabled.  If so, consider using the readonly attribute instead.

The same principle holds true for desktop application developers as well.  Consider whether your users will ever want to clipboard copy values from your disabled form fields when defining the behavior of whether the field values can be selected or not while disabled.

2 comments:

  1. Many thanks! It worked perfectly on my blog

    ReplyDelete
  2. Note to self: The "readonly" and "disabled" HTML attributes correspond to the ReadOnly and Enabled properties of the TextBox type, respectively.

    ReplyDelete

Non-spammers: Thanks for visiting! Please go ahead and leave a comment; I read them all!

Attention SPAMMERS: I review all comments before they get posted, and I REPORT 100% of spam comments to Google as spam! Why not avoid getting your account banned as quickly -- and save us both a little time -- by skipping this comment form and moving on to the next one on your list? Thanks, and I hope you have a great day!