Add input mask for text entry fields #415
Conversation
|
It looks like NCS Navigator Cases uses a jQuery plugin called masked input to implement input masks. |
|
Would something like this prevent users from entering (to follow on the phone number example):
I realize this feature request isn't about phone numbers per se. My question is more about if |
The mask isn't a regex, it's its own format. Here's a snippet of text taken from the input mask plugin page. a - Represents an alpha character (A-Z,a-z)
9 - Represents a numeric character (0-9)
* - Represents an alphanumeric character (A-Z,a-z,0-9)
There wouldn't be any validation on client or server side. |
It would prevent those, yes. For the first two, it shouldn't matter — they are semantically equivalent to the example mask. It would not force the user to enter special punctuation (and so have to guess the expected punctuation). Entry would go like this:
Etc. If your application needed to support phone numbers with country codes, you'd need a different mask (or maybe no mask at all). Question: why does this need to be Surveyor itself? In NCS Navigator, we support input masks, but not by associating a mask to each answer. Instead, we use JavaScript to attach the masks based on semantics derived from custom_classes. This makes changing them simpler (no new versions of surveys needed, no line-by-line review unless a class needs to be broken up) with no downsides that I can see. |
|
The main motivation was to have a way to specify input masks for answers in surveyor (iOS). As an alternative, we discussed passing the :custom_class attribute to surveyor (iOS) and having specific class names which would create input masks for answer text boxes, but that seemed like a limited solution. |
|
@jdzak @rsutphin What do you think of the syntax in: http://www.meiocodigo.com/projects/meiomask/ |
|
related to #342 |
|
The syntax seems straight forward. If we do decide to adopt this, would nu_surveyor only have to implement the mask rules? |
|
The syntax seems fine, though I'm not a big fan of the behavior of meiomask — I'd prefer one that shows the mask to the user (as underscores + punctuation) rather than just silently rejecting input it doesn't like. |
|
After talking with @yoon and @rsutphin I'm going to implement this with the jquery.maskedinput plugin and the new syntax will look like.. q "What is your phone number?" a :string, :input_mask => '(999)999-9999' q "How old are you?" a :integer, :input_mask => '999', :placeholder => '#' The default placeholder for an input mask will be underscores. Specifying :placeholder without :input_mask will do nothing. |
|
Thanks for this - Some features are failing against the current master. A cucumber feature would be helpful to demonstrate how this is to be used. Maybe even an example in the kitchen sink. Answer#placeholder might be ambiguous (confused with something like #hint). I propose we rename it to #input_mask_placeholder as it is really tied to that implementation. The limit might be removed in the future, so it might be good to leave it off for now. Another note, the translations branch will soon be merged, which removes the a_text helper. It's not in master yet, so depending on the timing, I can take on this one. |
|
@yoon I implemented all your suggestions. Ready for review. |
* 415-input_masks: rails 3.0 doesn't use 'change' migration syntax Fix input mask export test. #415 Shorten test survey. #415 Fixed masked input javascript path. #415 Changed name of data attributes to conform with what formtastic generates. #415 Updated survey json representation to include new placeholder name. #415 Testing complete input mask functionality. #415 Test that input_mask and input_mask_placeholder are serialized. #415 Add input mask example in kitchen sink survey. #415 Rename input mask placeholder attribute. #415 Remove input mask placeholder database length limit. #415 Simplify. #415 Use data tags to store input_mask and placeholder on tag for unobtrusive js. #415 Cleanup input mask javascript. #415 Serializing input_mask and placeholder attributes on Answer. #415 Adding masked input behavior to answers with input_mask attribute. #415 Adding input_mask and placeholder attributes to Answer. #415
Having a way to specify an input mask for text boxes would provide users a visual cue when entering certain types of data (e.g. phone numbers or zip code), and it would constrain what is entered to either alpha/numeric/both as well as the length of input.
One possible way to implement this would be to add a property on answer..
As an extra, it would be nice to control the placeholder character. So for example, instead of having an underscore as the placeholder, you could use 'Y' if you need the user to enter a year.