Группа OpenUI опубликовала у себя на сайте новый эксплейнер под названием Richer Text Fields. Cуществует целый класс задач, среди которых сложные текстовые поля, WYSIWYG-редакторы, комплексные поля поиска, поля для сообщений в мессенджерах, поля для комментариев. Сейчас разработчикам приходится писать много кода и костылей, чтобы это всё работало как требуется. Некоторые из самых распространённых проблем богатых текстовых полей пытаются решить этим эксплейнером.
Предлагается расширить возможности элементов
<input> и <textarea>, добавив некоторые новые API:- Получение диапазона текста
- Применение CSS Highlights к диапазонам
- Маски ввода
- Автодополнение ввода
Диапазоны текста
В браузерах есть интерфейс Range, который позволяет получить диапазон текста и узлов. Это можно использовать для выделения, перемещения, получения координат выделенных узлов. Но применить Range к тексту внутри
<input> и <textarea> сейчас нельзя. В случае с <input> диапазон будет пустой, а в случае с <textarea> диапазон будет содержать начальный текст, вместо того, который был введён пользователем. Предлагается расширить
Range или добавить новый специализированный интерфейс InputRange для получения диапазонов внутри <input> и <textarea>. Имея доступ к диапазону, можно получить координаты и привязать к ним всплывающее меню с опциями, как пример.Стилизация диапазонов
Так как сейчас нельзя выделить диапазон внутри
<input> и <textarea>, то и применить стилизацию к фрагменту текста тоже нельзя. Поэтому сейчас поверх поля накладываются <div>-ы, в них дублируется текст, вычисляются координаты, выполняется позиционирование и стилизация текста. Это сложно и с этим много проблем.Когда получение диапазона из
<input> и <textarea> станет возможным, тогда можно будет применить новый CSS Custom Highlight API для подсветки специальных токенов, например, теги в Slack (@all, @User Name).Маски ввода
Распространённый паттерн в интернете, особенно для номеров телефона. Сейчас для этого используются JS-плагины (привет jquery.maskedinput). Обычно я выступаю против такого, потому что работает плохо, мешает браузеру сохранять номер и предлагать автозаполнение. И вообще, дайте мне ввести мой номер телефона как я хочу.
Предлагается добавить атрибут
mask для <input>. Он принимает строку со значениями А (буква), 9 (число) и * (любой символ), из которых можно будет сформировать маску как в популярных плагинах. В CSS предлагается добавить псевдо-элемент ::masked и ::masked(n) для стилизации заполнителей. Сами заполнители будут отдельным элементом, как placeholder.Автодополнение ввода
В последнее время набрал популярность паттерн предсказания текста, он же "Ghost Text". Это когда вы пишете текст, а нейросеть предлагает вам продолжение, которое вы можете принять или отклонить. Так работает Copilot, например. Есть ещё варианты со всплывающим списком вариантов, а на телефонах уже давно есть Т9. Для решения этой задачи в вебе нужно много костылей и хитрые наложения
<div>-ов поверх поля ввода.Предлагается добавить к
<input> и <textarea> новый интерфейс с методами для генерации и отклонения подсказок, а также соответствующие события принятия и отклонения подсказки. При помощи этого API можно будет, например, подключить нейросеть, скормить ей пользовательский ввод, получить вывод и предложить пользователю. Псевдо-элементы ::suggestion и ::suggestion(n) позволят стилизовать текст предложения, а само предложение также будет отдельным элементом.***
Хорошие идеи, буду наблюдать за этим предложением.