Accept Japanese full-width numbers input

(Chinese) Japanese (Korean) users's IME/keyboards let them enter full-width (zenkaku in Japanese) numbers in form fields.

Half width: 1234
Full width: 1234

You see it clearly takes more width than half width characters.

The first intuition is to use <input type=number>. But Browser will simply clear user's full-width input, which they cannot even enter full-width numbers, nor you can get the user input to automatically fixed them by writing JavaScript1.

But if you want to go one step futher. The solution is to use <input type=text> with some JavaScript. This is the idea, change accordingly:

// <input type=text pattern="[0-9]*">
const element = document.querySelector('input[type=text]');

element.addEventListener('invalid', function(event) {
  event.target.setCustomValidity('Please input a positive half-width number 🧝🏻‍♀️');
  event.target.value = '';
});

element.addEventListener('input', function(event) {
  event.target.setCustomValidity('');
});

element.addEventListener('change', function(event) {
  const input = event.target;
  input.value = input.value.normalize('NFKC');
});

The reset for input event is needed for Chrome, see here.

I implemented such input in my Japanese Numbers post.

Thanks for reading!