Display amount of characters left in real time when editing a story #73

fabd opened this Issue Feb 11, 2017 · 3 comments


None yet

2 participants

fabd commented Feb 11, 2017

I love this design on dribbble.com's Profile page:

dribbble - characters left

Create a VueJS component that displays the amount of characters left in an input field or textarea, in real time for better user experience.

This is a fun little thing to practice VueJS before creating more complex components.

If such a VueJS component for this already exists, please let me know!

@fabd fabd added this to the UX Improvements milestone Feb 11, 2017
@fabd fabd self-assigned this Feb 11, 2017
fabd commented Feb 11, 2017 edited

Requirements in case someone would contribute the component (quick draft):

  • Submit via CodePen( preferably), here is a simple Vue 2.x pen that can be forked
  • Don't use Bootstrap. This is a tiny component that doesn't need dependencies.
  • Properties: max length (Number), input ref (a CSS selector could be #id or .class-name , etc. to use with document.querySelector())
  • The "warning" threshold where it switches to red, can be hardcoded (ie. 20 chars). Use a class binding instead of a inline style binding, so that the color can be configured via CSS overrides.
  • The component root element uses display:inline-block by default which can be easily aligned (text-align:right).
  • Use X-Template syntax because I will move the code to a .vue file
  • (BONUS POINTS 👍 ) Test with Japanese Input Method (IME), test on mobile (in theory this isn't an issue as this doesn't need to watch keyup/keydown, but the onchange event(s) is something that may or may not be triggered as expected by the IME, I don't know)
  • 💬 Reach me easily via Gitter
faneca commented Feb 13, 2017 edited

Ok, there you go: http://codepen.io/faneca/pen/pRGzpG
This is my preliminary attempt. Feedback is more than welcome, as this is my first with vue.js

EDIT: Also, didn't care about styling much, as I don't really know if you want to keep the "counter" component separate from the textarea or whatever input field, or if you are going to compose it with other components to build a derived one.

EDIT2: Also, about your comment on input methods, https://vuejs.org/v2/guide/forms.html says this:

For languages that require an IME (Chinese, Japanese, Korean etc.), you’ll notice that v-model doesn’t get updated during IME composition. If you want to cater for these updates as well, use input event instead.

fabd commented Feb 13, 2017

Thanks faneca! Looks good to me. 👍

Actually I haven't refactored the Study edit area with VueJS yet so I'll probably bind a change event to the text area, but that is a necessity of my legacy code and the way you did it makes way more sense :) (ie. using the story in the model rather than getting the length from the input via DOM).

It's a pretty small thing but I thought someone might enjoy it.

Indeed it makes sense to add it in a parent component. So eventually I will have a "EditStory" component, which can include the CharsLeft one with the textarea as you did.

I think it would be a fun little thing for me to add in as well, it was requested before after all. I need to get the Patreon out though, but I'll get back to it!

@fabd fabd added the NEXT label Feb 13, 2017
@fabd fabd added the small? label Feb 21, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment