2

I am working on a project that allows users to edit objects named by clicking on it using something similar to the HTML 5 Content-editable attribute.

Update:

  • The character limit is 30 not three.
  • Also the input field is meant to have the counter below it much like twitter has

However we need a way to notify the users of the 30 character limit to their object name. My first hypothesis is to use a text counter like the ones twitter uses.

Are there are some examples of other techniques that we can apply or does the method applied to a textarea field work best for an input as well?

Thanks,

Improve this question
2
  • 1
    inside and input field? extremely NOT recommended, specially if you have a 3 character limit, where is the counter supposed to fit? Instead, you can add it below the input field, or simply add a generic warning on top, and then validate if >3 characters
    – Devin
    Jun 2, 2016 at 16:56
  • thanks sorry if I wrote inside the input field. What I meant to say was below the input field similar to what twitter does.
    – Darrenbydesign
    Jun 3, 2016 at 3:08

3 Answers 3

Reset to default
1

You and Google material design have already described a good solution to your problem. The method applies well to both text areas and text input fields, so don't hesitate to use this approach. See the image below:

enter image description here

Improve this answer
4

My bank has a strict 5-digit pincode policy and the input looks like as many underscores as there are characters allowed. It's very minimalist, yet you quickly get that each corresponds to a character. Here's an approximate rendering of it:

A B C
_ _ _ _ _
Improve this answer
1
  • I actually like that idea a great deal. Its intuitive and interesting. I think this would be a great alternative to a normal counter.
    – Darrenbydesign
    Jun 3, 2016 at 3:12
1

In my opinion, you could use "helper text" inside your input, which describes number of characters. In my example i use "abc" text as help. One letter typed by the user replaces one letter of the helper text.

enter image description here

Improve this answer
2
  • I like the idea of this, it is essentially just an input-mask except the placeholder remains visible. It will only work for short values though, you wont want to enforce a 300char limit with a ton of placeholder text. It also begs the question what default text do you use thats not confusing.
    – DasBeasto
    Jun 2, 2016 at 20:12
  • I agree that I like the idea of a placeholder mask. I don't know that we have any placeholder text that would make the most sense context wise however. Thanks guys these ideas are really helpful
    – Darrenbydesign
    Jun 3, 2016 at 3:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.