(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 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 (setCustomValidity('');
) is needed for Chrome, see here.
I implemented such input in my Japanese Numbers post.