Максимальная длина ввода HTML с дополнительными символами UTF8

Question

Я бы хотел, чтобы мои пользователи могли вводить символы EMoji в поле ввода.Я предполагаю, что в 2019 году это должно быть столь же тривиально, как и установка мета-кодировки сайта на UTF-8.Однако при тестировании в Chrome или Firefox приведенный ниже пример подсчитывает дополнительные символы UTF-8 (длиной 4 байта) по-разному.
В первом входе я могу ввести только 2 символа после корма.Во втором вводе я все еще могу ввести еще 3 символа после ‰, который имеет длину 3 байта.

Что является причиной такого противоречивого поведения?Есть ли другая мета-настройка HTML для 4-байтовых символов?В Edge 17 он работал нормально. Даже мусор IE 11 правильно считает длину.

<input type="text" value="?" maxlength="4" />
<input type="text" value="‰" maxlength="4" />

Мои тесты: http://jsfiddle.net/L726ryea/7/

Answer 1

Спецификация HTML5 говорит, что maxlength применяется к длине строки JavaScript , которая является числом кодовых единиц UTF-16.Таким образом, кодовые точки за 0xFFFF, такие как Emojis, считаются двумя единицами кода.Это объясняет поведение, которое вы видите.