RonaldJerez / vue-input-facade

A lightweight and dependency free input masking library created specific for Vue
https://ronaldjerez.github.io/vue-input-facade/latest/
182 stars 27 forks source link

fix: handle composition events for better international keyboard support #48

Closed scottvanbrug closed 2 years ago

scottvanbrug commented 2 years ago

Description

Add handling for composition events, allowing users to compose inputs normally before committing a value to be masked. Supplements the fix from v1.3.8 with more robust handling of the composition events.

Input methods that use input composition will allow users to compose input before it is inserted and the mask is applied to the input value. The input's v-model will not be updated until the text is inserted and the mask applied. This prevents input values that are actively being composed from being propagated from the masked input.

Example Screen Videos

Using a Chinese Pinyin keyboard on Windows, numeric inputs are handled correctly when masked:

input-facade-chinese-input-numeric

Using a Chinese Pinyin keyboard on Windows, users can compose text before a mask is applied. v-model value does not update until text is inserted and masked:

input-facade-chinese-input-alphanumeric

Using a Chinese Pinyin keyboard on MacOS in Safari (Safari has an additional Input event for when composition text is inserted), input can be composed before the mask is applied. v-model value does not update until text is inserted after composing:

input-facade-chinese-input-safari-alphanum

Using a Japanese keyboard, full-width numbers trigger composition, half-width numbers can be selected and inserted:

input-facade-japanese-input-numeric

Checklist

github-actions[bot] commented 2 years ago

:tada: This PR is included in version 1.3.9 :tada:

The release is available on:

Your semantic-release bot :package::rocket: