contenteditable однострочный ввод

Для приложения, которое мы разрабатываем в компании, где я работаю, нам нужен ввод, который поддерживает вставку смайликов в наше веб-приложение на основе JS. В настоящее время мы используем ввод с короткими кодами смайликов (например, «:-)») и хотели бы переключиться на вставку реальных графических изображений.

Наш первоначальный план состоял в том, чтобы использовать contenteditable

. Мы используем слушателей для события вставки, а также различные взаимодействия клавиш / мыши, чтобы гарантировать, что нежелательная разметка не попадет в contenteditable (мы удаляем текст из его тегов контейнера и оставляем только теги изображений, которые мы вставили сами).

Однако , проблема прямо сейчас в том, что размер div изменяется, если вы вставляете достаточно содержимого (т.е. его высота увеличивается). Мы не хотим, чтобы это произошло, и недопустимо, чтобы текст был просто скрыт (например, простой overflow: hidden ). Итак:

Есть ли способ заставить contenteditable div вести себя как однострочный ввод?

Я бы хотел, чтобы было относительно простое свойство attribute / css, которое я пропустил, которое будет делать то, что Я хочу, но при необходимости мы также будем признательны за предложения CSS + JS.

56
задан Gijs 26 July 2011 в 14:19
поделиться