vue-grapheme-input

Background

This is a custom component which builds on grapheme-splitter, it's mainly to deal with characters counts in different language. When we use javascript to get emoji characters, we can get correct "UTF-16 code units" counts. However when we trying to use "maxlength"(or minlength) attribute in HTML input tag, we can't get the right apperence in the web browser.

For Example, if we use 5 for the "maxlength" of a input tag attribute and put the "Ĺo͂řȩm̅", which is "5" characters look, into the box:

<input maxlength="5"/> 

The Chrome browser will only display "Ĺo͂r", but the Safari can show full text "Ĺo͂řȩm̅". The unexpected result and the difference make developers hard to deal with. Thus, this component packed grapheme-splitter and u can use "maxlength" on it naturally like the usage of normal HTML attributes.

<grapheme-input maxlength="5"></grapheme-input>

The result will be exactly what we expect and there's no difference between all browsers.

Usage

npm -i --save vue-grapheme-input

Then just import to your .vue file and use it in template directly

import VueGraphemeInput from "vue-grapheme-input";

<vue-grapheme-input maxlength="3" />

Note

The component can only use on Vue 2.4.0+ becuase of the "inheritAttrs" option.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit