assisted-input

Easily add characters with a diacritic mark to an input field. Similar to (and inspired by) how phone keyboards allow you to hold a key pressed to get related keys. See this demo for instructions.

Installation

assisted-input is available on npm:

npm install --save @aawd/assisted-input

if you just quickly want to check it out, clone the repo, run the express server and open http://localhost:9022:

git clone https://github.com/aa-wd/assisted-input.git
npm run server:prod

Usage

Add data-assisted as an attribute to inputs you want assistance for:

<!-- regular input -->
<input />

<!-- assisted input -->
<input data-assisted />

In your javascript, initialize the assisted input fields script by calling the default export (let's name it createAssistedInputs) with an object that has single characters as keys, and an array of single characters with diacritic marks as values.

import createAssistedInputs from '@aawd/assisted-input';

createAssistedInputs({
  'a': ['a', 'à', 'â', 'æ'],
  'c': ['c', 'ç'],
  'e': ['e', 'é', 'è', 'ê', 'ë'],
  'i': ['i', 'î', 'ï'],
  'o': ['o', 'ô', 'œ'],
  'u': ['u', 'û', 'ü', 'ù'],
});

Now hold any of those keys (in the example a, c, e, i, o, u) pressed for a while. See the demo for more instructions.