Как ограничить количество вводимых символов в input включая смайлики?

Question

[AntonVirovets]

Пишем мобильное приложение на ionic. Появилась такая проблема, что есть валидация для input по количеству символов. Когда вводишь обычные символы, то все норм, но если вводить смайлики(это я именно уже про тест в мобильном приложении), то получается что смайлики при вводе считаются за 1 символ, а на самом деле у всех смайликов разная длинна(из-за кодировки). И получается когда из бэкэнда приходит эта валидация, то инпут становится не валидным. Я нашел способ преобразовать строку в массив, но как мне добиться такого результата как при maxlength(когда ставишь туда значение например 20, то ты вводишь 20 символов, а потом инпут не дизейблится, а все еще активный, но вводить больше нельзя)?

Answer 1

[Алексей]

Добрый день.
Первое, что бы я сделал - это проверил, что смайлик не попал в пограничное состояние максимума (типа двоеточие это 20-й символ, а D это уже 21-й). Такие случаи стоит обработать отдельно.
Второе: проверяете длину строки на максимально допустимое количество символов. Если больше, то откусываете от значения первые 20 символов и скармливаете VALUE инпута.
PS. Непосредственно на ионике не пробовал.

Comments

[AntonVirovets]

Я нашел такое решение как, сначала брать value инпута, и преобразовать в массив таким образом, что бы каждый символ или смайлик были отдельным значением массива при каждом keypress. Потом преобразовал массив в единую строку и уже запустил проверку по длине строки. Если подходит, то разрешал дальше набирать текст, если нет, то запрещал) вроде работает, проверил) что-то типа такого вышло

<input #target (keypress)="titleValidation(target.value)">

titleValidation(input) {
        const value = Array.from(input.value).join('');
        return value.length < 29;
    }

[WapSter]

AntonVirovets, хитро)

[Алексей]

AntonVirovets, Мой мозг как всегда все усложнил :)
Я бы только сократил все на оператор join. по факту он лишний, а длина массива и есть длина строки.

[AntonVirovets]

lexxyar, так вот как раз в том то и прикол, что при перекодировке смайлик преобразуется в 2 символа, по этому сначала нужно перевести смайлик в символ с помощью массива, а потом уже преобразовать все элементы в один и уже считать длину с учётом смайликов