div contenteditable или textarea?

Question

[Артур Кох]

Собственно есть задача, которую можно решить двумя способами, но в каждом есть заквоздка. Поэтому задам по вопросу для каждого:

1. можно ли POST'ом отправить содержимое дива contenteditable и как?

2. можно ли, и если да, то как заставить textarea менять свою высоту при добавлении текста в поле для того, чтобы не появлялась вертикальная прокрутка? т.е. дать полю поведение дива.

Answer 1

[gigigi]

Насчёт п.1 — можно и без доп.полей. Получить содержимое дива (по id) и отправить POST'ом в месте с другими данными. На jQuery это будет примерно так:
var text = $('#editablediv').html();
$.post('/ajax.php', {text: text}, function(data) {alert(data);});

Comments

[Артур Кох]

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

Answer 2

[ertaquo]

По второму:

<textarea onkeyup="this.style.height = 'auto'; this.style.height = this.scrollHeight + 'px'"></textarea>

Сброс высоты на auto нужен для получения реальной высоты. Если бы не было этого сброса, то высота оставалась бы на своем максимальном значении (например, если удалить строку).

Comments

[Артур Кох]

да, я так и понял после комментария gigigi, но как я и описал выше — я считаю, что в моем случае будет более логичным использовать вариант с дивом. все равно спасибо за ответ.

[Сергей Протько]

Если DIV используется в качестве альтернативы Textarea без какого либо отображения состояния (типа там какой WYSIWYG) то такое решение само по себе будет избыточным. Так что тут варианты текстерии с кейап или div[contenteditable=true] будут как минимум равны по производительности, и быть может, первый быстрее.

[ArturSitnikoff]

С дивом только сегодня начал разбираться, а с textarea решение можно посмотреть здесь, но как я ни старался, от всех до единого багов избавиться — не получилось, во всяком случае пока. Есть еще пара вариантов побороться с textarea, если получится сделать, отмечу в топике.

[ArturSitnikoff]

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

Answer 3

[Сергей Протько]

в чем проблема при отправлении формы (при onsubmit) заносить в hidden полесодержимое дива?

Comments

[Артур Кох]

Спасибо, принимаю как ответ на первый вопрос.

Answer 4

[gigigi]

По поводу второго, как вариант, попробуйте JS'ом считать кол-во переносов строк (\n) и в зависимости от них менять высоту. Может получится.

Comments

[Артур Кох]

слишком геморно, ибо в поле будет мануально писаться код, и проверки нужно будет делать на каждом переносе строки.

[Артур Кох]

и удалении строки также.

[gigigi]

А в чём проблема? Проверяйте хоть по каждому onkeyup в текстарее. Тормозить оно не должно.

[Артур Кох]

из двух вариантов лучше выбрать менее ресурсоемкий даже если более сложный не сильно нагружает приложение.

[Сергей Протько]

Преждевременная оптимизация? Производить объемные вычисления при mousemove не стоит, да, но по keyup сделать одну операцию сравнения и если надо, то чутка поправить DOM… почему бы и да.

Answer 5

[Артур Кох]

после долгих раздумий было решено отказаться от этого типа формы. в итоге пришел к jquery.ui разметке а-ля jsfiddle. только вот на jsfiddle iframe'ы. я же сделал на textarea.