Какая польза от использования диапазона вместо ввода

Я заметил на нескольких веб-сайтах, таких как Facebook и Twitter, что вместо обычных полей <input> в их разметке они используют <span> и добавьте то, что пользователь набирает на него, используя JavaScript.

Этот процесс используется как, когда пользователь отправляет прямые сообщения другим пользователям, когда пользователь отправляет сообщения и, когда комментарий делается в сообщении.

Я не могу думать о какой-либо возможной причине, почему это было бы полезно использовать над тегом <input> HTML5.

Каковы преимущества использования этого метода? И если их нет, , почему они это делают?

ОТВЕТЫ

Ответ 1

Стандартный input элемент ограничен входом обычного текста. Это отлично подходит для большинства ситуаций, когда вы ищете вход от пользователя.

Однако, как Facebook, так и Twitter предлагают что-то, что выходит за рамки обычного текста:

Composing example tweet

Как вы можете видеть, это больше, чем просто текст: форматирование. Как Facebook, так и Twitter поддерживают встроенное форматирование для особых вещей, таких как упоминания и хэш-теги. Чтобы отформатировать их в другом стиле, они не могут использовать элемент input, но должны отображать контент по-разному.

Вместо этого они используют редактируемый контент элемент, чтобы позволить пользователям вводить контент, сохраняя при этом все возможности форматирования.

Обратите внимание, что хотя contenteditable предлагает множество способов форматирования материала, это может быть и кошмар, если вы строите что-то более сложное. Средний, предлагающий очень мощный и полезный текстовый редактор, писал об этой теме до, о том, как они построили свой редактор, какие проблемы они столкнулись и как они пытались обойти его.

Ответ 2

A span или div элементы могут быть доступны для редактирования (и предоставляют более богатую опцию для представления, например, @autocomplete и #hashtag).

Чтобы сделать редактируемый span, вы просто используете contenteditable="true":

span {
  border: 1px solid gray;
  display: inline-block;
  width: 55px;
  height: 25px;
  font-family: arial;
  color: red;
}
<span contenteditable="true"></span>