What comes to my mind is a AJAX div that has the same location as the
field, but on top of it. As user inputs data it looks like the field has
gray text, but it really doesn't. This way you can control what is shown
in the div without affecting the field.
Justin Giboney
Wade Preston Shearer wrote:
On 8 Nov 2008, at 12:01, Velda wrote:
Would it be important to control the style of what's typed in, or
only to control the style of the text that's predefined?
I am using the Meio jQuery Mask plugin [1] to both provide input hints
and to mask (control/format) input. Using a date field as an example,
I already have the following working:
The text field has "mm/dd/yyyy" pre-populated when the page loads.
When the user tabs or clicks into this field, this text remains. The
mask controls what kind of text the field accepts, what order, and
formats it appropriately; meaning, for the first "m" will accept
either a 1 or a 2 and nothing else. The second "m" will accept a 1 -
9. The cursor is then automatically advanced passed the slash so that
the user does not (cannot) have to type it. The first "d" will accept
1 - 3 but nothing else and so on.
The text "mm/dd/yyyy" is light gray to indicate that it is a hint to
the field's required formatting. Once the user starts typing, the
field text changes to black to indicate to the user that the text they
are entering is valid text. As valid input is entered, it replaces the
mask. So, if I had only entered the month, the content of the field
would look like "08/dd/yyyy" with my cursor between the first slash
and the first "d". If the user then strikes the delete key twice, the
"8" and "0" will be deleted, with the mask being reinserted and the
contents looking like "mm/dd/yyyy" again.
A red border around the field flashes when the user types a
non-acceptable character (such as a a letter or symbol where only a
number is allowed, or an "8" where only a "1 - 3" is allowed. Once the
user finishes typing in the date and tabs off the field, the text
remains black as it is now filled. If the user starts typing but then
deletes what they typed and then tab away, the text changes back to
gray leaving the gray hint as it was before.
All of this works and is great. It is good usability, good for data
entry, and eliminates the need for form content validation. I would
like to take it one step further though so that the difference between
entered content and the mask is even clearer.
Instead of changing the mask to black as the user starts typing, it
would be awesome to be able to always keep the mask in gray, italic
text and the user-entered content in black, normal text. And this
styling would remain as the user enters and removes text. So, if the
user entered the first two characters (the month), the content of the
text field would be "08" in normal black text, followed by "/dd/yyyy"
in gray italic text.
Let me know if that doesn't make sense and I can toss a working
example up on a server for you to see.
[1] http://www.meiocodigo.com/tag/mask/
------------------------------------------------------------------------
_______________________________________________
UPHPU mailing list
[email protected]
http://uphpu.org/mailman/listinfo/uphpu
IRC: #uphpu on irc.freenode.net
_______________________________________________
UPHPU mailing list
[email protected]
http://uphpu.org/mailman/listinfo/uphpu
IRC: #uphpu on irc.freenode.net
