Opened 12 years ago

Closed 10 years ago

Last modified 9 years ago

#3286 closed enhancement (fixed)

Need UI to provide hints for input formats

Reported by: Adam Peller Owned by: liucougar
Priority: high Milestone: 1.5
Component: Dijit Version: 1.0
Keywords: Cc: Douglas Hays
Blocked By: Blocking:

Description (last modified by Adam Peller)

You're presented with an input for a date or a currency (e.g. DateTextbox?, CurrencyTextbox?). How do you know what to enter? It depends on your locale, and other constraints. For dates, you might be asked for a 'short' date or a 'long' date, and that depends on your locale, as does the prompt itself. Sooo....

the patterns to handle this include:

inline text to prompt the user, e.g. Please enter an amount such as $1,234.56 or greyed out text in the widget, like Jesse's dojo.behavior or perhaps a prompt in some other form, like a tooltip.

Which patterns do we want to support? Do we provide them as examples or code in dijit.*? Can we generate them as simple examples using something like Declaration.js?

Attachments (2)

3286.patch (14.8 KB) - added by liucougar 10 years ago.
patch with test case
3286.2.patch (12.4 KB) - added by liucougar 10 years ago.
another approach: overlay a span on top of the input

Download all attachments as: .zip

Change History (20)

comment:1 Changed 12 years ago by Adam Peller

Milestone: 1.02.0

comment:2 Changed 12 years ago by alex

Milestone: 2.01.3

Milestone 2.0 deleted

comment:3 Changed 11 years ago by Adam Peller

Description: modified (diff)
Milestone: 1.31.4

comment:4 Changed 11 years ago by bill

Milestone: 1.41.5

bumping 1.4 tickets to 1.5, and most 1.3 tickets to 1.4

comment:5 Changed 10 years ago by Adam Peller

Milestone: 1.5future

comment:6 Changed 10 years ago by liucougar

Milestone: future1.5
Owner: changed from Adam Peller to liucougar

Changed 10 years ago by liucougar

Attachment: 3286.patch added

patch with test case

comment:7 Changed 10 years ago by bill

Cc: Douglas Hays added; bill removed

Changed 10 years ago by liucougar

Attachment: 3286.2.patch added

another approach: overlay a span on top of the input

comment:8 Changed 10 years ago by liucougar

Resolution: fixed
Status: newclosed

(In [21631]) fixes #3286: placeholder support on dijit.form.TextBox?

comment:9 Changed 10 years ago by liucougar

(In [21641]) refs #3286: lucid needs a bit more css tweek to place the placeholder nicely on top of the input

comment:10 Changed 10 years ago by liucougar

(In [21766]) refs #3286: dojo.attr(node,'innerText',...) does not work across browsers use createTextNode instead

comment:11 Changed 10 years ago by bill

(In [21780]) fix timeout (this test takes more than 1s), refs #3286.

comment:12 Changed 10 years ago by bill

(In [21960]) regression from [21926], placeHolder was appearing in upper/left part of browser window, not inside TextBox?. Refs #10974, #3286.

comment:13 Changed 10 years ago by bill

Resolution: fixed
Status: closedreopened

The hint text isn't showing up in IE6 until the field is focused and then blurred.

comment:14 Changed 10 years ago by bill

Yah, it's not visible:

> dojo.position(dojo.query(".dijitPlaceHolder")[0])
{x:-2 y:-2 }
> dojo.marginBox(dojo.query(".dijitPlaceHolder")[0])
{l:0 t:0 }

Borrowing from _layoutHackIE7(), this makes it appear (as tested in the console from test_validate.html):

dojo.query(".dijitPlaceHolder")[0].style.filter = "1234"

comment:15 Changed 10 years ago by liucougar

Resolution: fixed
Status: reopenedclosed

(In [22023]) fixes #3286: set style.filter="" on the created placeholder span would fix IE6 layout bug (only do this fix if we detect there is a layout problem)

comment:16 Changed 10 years ago by liucougar

(In [22024]) refs #3286: set filter in css is enough to fix this IE6 bug also made sure this fix does work even if the textbox is initially hidden

comment:17 Changed 10 years ago by bill

(In [22043]) Changes for easier testing of themes:

  • change ComboBox? --> FilteringSelect, to be able to test display of validation icon
  • added a few placeHolders (hint strings), specifically to DateTextBox and FilteringSelect
  • add dialog with action bar (only currently working for Claro)
  • add dialog with loading animation (that happens every time the dialog is opened)
  • added "Dialogs" MenuBar item to make it easier to display Dialogs

Refs #10527, #3286, #11034.

comment:18 Changed 9 years ago by bill

(In [22254]) remove stray </div>, refs #3286

Note: See TracTickets for help on using tickets.