Opened 12 years ago

Closed 12 years ago

Last modified 11 years ago

#8704 closed enhancement (fixed)

mark readonly visually

Reported by: thekryz Owned by: Douglas Hays
Priority: high Milestone: 1.4
Component: Dijit Version: 1.2.3
Keywords: readonly ValidationTextBox visual Cc:
Blocked By: Blocking:


When the readonly attribute is set on a ValidationTextBox? (might be the same for other elements) its value cannot be changed - but I'd suggest that other than that it should be marked visually as not editable. Like making the text color gray (at the moment it remains black) and maybe setting the cursor to default for the whole ValidationTextBox? with something like cursor:default; (At the moment you see the normal text-edit cursor). At the moment I'm using some CSS to do part of that manually:

.tundra .dijitTextBox input[readonly]{color:gray;}

Change History (9)

comment:1 Changed 12 years ago by thekryz

Actually, I use readonly only instead of disabled because I want the value submitted with my form. I wonder if it shouldn't look and behave exactly like disabled. I know the browser handles these two differently as well in look and feel, but for me it's the same - the only difference being that the value is submitted or not. Is there any good reason? Well, I just think that like this (it looks like being editable and all) it confuses the user into thinking that this part of the form is broken (since it doesnt react, but looks like editable) - so if you don't want to make it look like disabled (which I would prefer), maybe at least do something in between for usability please.

comment:2 Changed 12 years ago by bill

Milestone: tbd1.4
Owner: set to Douglas Hays

Right, it should look like disabled, and I thought we fixed this already but I can't find the ticket now (and plus which, it's not working).

Marking for 1.4 although could slip it into 1.3 especially if it's just a CSS fix.

comment:3 Changed 12 years ago by Douglas Hays

(In [16764]) References #8704. Reuse disabled cursor style for readonly.

comment:4 Changed 12 years ago by Douglas Hays

The Button widgets treat readOnly similar to disabled, but there's nothing comparable in the native HTML counterparts. Natively, buttons do not support the readonly attribute and buttons marked readonly can still be clicked. Given this native behavior, I'm thinking this is a bug with the Button widgets (and subclasses) and the readOnly attribute should be removed for them. For textboxes, readOnly differs from disabled only in whether or not the value is submitted with the containing form, but since native buttons don't support readonly and can be clicked, this difference doesn't apply.

comment:5 Changed 12 years ago by Douglas Hays

Also noted is that we currently do not set the WAI state for readonly textboxes. It should be set to "readonly".

comment:6 Changed 12 years ago by bill

I agree that readOnly shouldn't be an attribute on button widgets. Probably you can just refactor so that attribute is in FormValueWidget? That's a pretty minor change; I think it's OK to check it in as part of this ticket.

But anyway, this ticket is about TextBox based widgets.

I should also mention that Julie was working on new CSS for readonly, disabled, focused, etc. Hopefully we will get that in the future, at which point disabled, readonly, and normal textboxes will all look different.

comment:7 Changed 12 years ago by Douglas Hays

Resolution: fixed
Status: newclosed

(In [17314]) Fixes #8704. Duplicated Disabled rules in css files for ReadOnly? (presumably these will be tweaked later to differentiate). Added _setReadOnlyAttr to _FormValueWidget so that programmatic readOnly changes visually show immediately. Moved readOnly attribute from _FormWidget to _FormValueWidget since native button widgets (including radio buttons and checkboxes) do not support readonly. Removed readOnly checking from Button.js since it should never have been there.

comment:8 Changed 11 years ago by Nathan Toone

(In [17551]) Refs #8704 add readOnly checking back into checkbox, since it extends button and readonly was removed from button. Make Multiselect extend from _formValueWidget instead of _formWidget so that it can get the readonly stuff back in as well

comment:9 Changed 11 years ago by Nathan Toone

(In [17555]) Refs #8740 - fix trailing comma...

Note: See TracTickets for help on using tickets.