Cleave.js: Show remaining placeholder values when typing

[stuartha13]

Would it be possible to keep the placeholder text in the input while the user types. Let's take dates for example:

Currently:
Input shows the placeholder: _"MM/YY"_
When the user types the first character (let's say 1), the input will show: _"1"_

Suggestion
Would it be possible for the input to rather show: _"1M/YY"_

Attached a mockup too :)

[custa1200]

This does not seem like a good idea. Too easy for users to think the content has been pre filled. This would be a UX nightmare.

Sent from my iPhone

On 31 Jan 2017, at 1:02 am, stuartha13 [e-mail] wrote:

Would it be possible to keep the placeholder text in the input while the user types. Let's take dates for example:

Currently:
Input shows the placeholder: "MM/YY"
When the user types the first character (let's say 1), the input will show: "1"

Suggestion
Would it be possible for the input to rather show: "1M/YY"

Attached a mockup too :)

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[stuartha13]

@custa1200 what about if it were greyed out/washed out like the placeholder text would normally be. I was meant to add that to my mockup, but forgot to. Would this still be a UX nightmare?

[custa1200]

You could test it for you scenario but I would not push that as a design decision in my work. Pretty sure you would also not be able to point to another successful implementation of this pattern, I would expect it to fail testing.

Sent from my iPhone

On 31 Jan 2017, at 6:03 pm, stuartha13 [e-mail] wrote:

@custa1200 what about if it were greyed out/washed out like the placeholder text would normally be. I was meant to add that to my mockup, but forgot to. Would this still be a UX nightmare?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[stuartha13]

Thanks for the quick feedback - it's really useful.

We were just concerned that people (from different locales) would possible forget the date format that we're expecting. If you're used to doing DD/MM/YYYY (based on your locale), but we're asking for YYYY/MM/DD (based on our locale), then it would be beneficial to see the pattern.

I'm going to close this ticket because we can get around this by just putting the pattern in the input's label to remind the user.

[jipigi]

We have exactly the same concern here as we live in a country where both french and english are commonly used. In canada, people are always wondering whether the month comes before the day or not... Keeping the placeholder in place while typing would be a great plus for us.

For the UX concern, i think when you are in the situation where your users wonder which pattern to follow to correctly input their data, the placeholder would clearly indicates what to do next in a elegant manner, especially with the color distinction (grey placeholder VS black text). But even if the placeholder is the same color as the text, you have numeric VS alphabetic characters, and that itself is enough to make it clear. The ambiguity comes when your placeholder use 0 or 9 to represent number and A or Z for letters... But for a date, I think it works well.

As @stuartha13 mentionned, we could add the pattern in the input label, or in an helpertext below the field, but it can easily clutter the interface when you have multiple date fields in one screen.

Have you ever consider reopening this issue since it has been closed ? Am I the only one still interested in that feature ?

[jdpopkin]

jquery.maskedinput allowed this. I'd like to stop using maskedinput and start using Cleave, especially since maskedinput is no longer maintained and its author recommended switching to Cleave, but I can't do that without changing my UI.

I would love to have this feature in Cleave.

[pudgereyem]

You could test it for you scenario but I would not push that as a design decision in my work. Pretty sure you would also not be able to point to another successful implementation of this pattern, I would expect it to fail testing.

@custa1200, we've been using this implementation for over more than 2 years. I work for a Payment Gateway so we have a lot of users entering their Date of Birth. To validate this I've both looked "Time to complete", but also looked through "User session recordings" to see how the user interacts with the field.

We are, as well as @jdpopkin, @jipigi and @stuartha13 concerned that users when starting to type would wonder/forget which pattern to follow to correctly input their data.

I'm more than happy to provide you more data on how this is working for us, as well as help out with the implementation. I really think this would be a great addition to the library.

_P.S. We've been using https://github.com/s-yadav/react-number-format to this in the past but are now looking to use Cleave instead._

[mxgl]

Sad to see this not be implemented