#javascript #html
#javascript #HTML
Вопрос:
Я пытаюсь написать легкий виджет html / javascript, который позволяет мне раскрашивать каждый символ по мере его ввода. Я думал, что способ сделать это — иметь поле ввода, которое реагировало бы на события, но чье фактическое отображение было бы перекрыто html div, который считывает значение поля ввода, выделяет его и записывает. Является ли это рекомендуемым способом выполнения действий? Существует ли библиотека, которая уже реализует это и учитывает любые неудобные детали, о которых я, возможно, не подумал?
редактировать: поиск способов реализации идеи cronoklee, пригодной для использования, привел к появлению этой замечательной статьи: http://perplexed.co.uk/993_contenteditable_cross_browser_wysiwyg.htm
Ответ №1:
Это может представлять интерес: http://www.w3.org/TR/html5/editing.html#contenteditable
Я бы, вероятно, настроил div с возможностью редактирования содержимого и вызвал бы функцию javascript при нажатии клавиши, которая обертывает последний введенный символ в стилизованные теги span. Если вам нужно отправить введенные данные, задайте тип ввода =’hidden’ и заполняйте его при нажатии клавиши. Нет необходимости накладывать одно на другое!
Редактировать: Я только что понял (месяцы спустя!) что вы можете просто использовать div.textContent для получения содержимого ввода. Это просто покажет текст без оформления, поэтому нет необходимости в этом дополнительном поле ввода для захвата символов.
Комментарии:
1. это звучит слишком мощно — я не хочу разрешать пользователю вводить произвольный html в моем текстовом поле, я хочу, чтобы мои собственные функции обратного вызова выделяли его текст по мере ввода или изменения.
2. Ну, используя систему, которую я описал выше, вы могли бы фильтровать ввод только по указанным вами символам. Вы могли бы даже полностью отключить редактирование и заполнить div с помощью javascript по мере ввода пользовательских типов. Это означает, что они не увидят курсор, что является проблемой удобства использования.
3. хм — ладно, я понимаю, к чему ты клонишь. хорошая идея, и я получаю произвольный стиль div бесплатно.
Ответ №2:
Если вам нужен подсветка синтаксиса / редактор, это действительно хорошо. Есть демо-версия: http://ajaxorg.github.com/ace/build/editor.html
Комментарии:
1. опять же, слишком тяжелый — все, что я хочу, это цветной текст с помощью некоторых обратных вызовов, а не полноценный редактор или даже лексер.
Ответ №3:
Это звучит как большая проблема, но без особого результата. Лично мне нравится, как stackoverflow делает это, используя текстовую область, а onblur применяет выделение к предварительному просмотру.
Комментарии:
1. это для онлайн-игры в слова; должна быть, например, обратная связь в режиме реального времени, если пользователь начал вводить что-то недопустимое (текст должен становиться красным буква за буквой), а также для некоторых других глобальных условий (чтобы вы могли ввести что-то, и другая часть строки покрасилась бы сама)