[UPHPU] text in input two different styles

[Wade Preston Shearer]

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/
-------------- next part --------------
A non-text attachment was scrubbed...
Name: smime.p7s
Type: application/pkcs7-signature
Size: 2425 bytes
Desc: not available
Url : http://uphpu.org/pipermail/uphpu/attachments/20081108/2e89b435/smime.bin