div contenteditable or textarea?

Question

css

Actually there is a problem that can be solved in two ways, but each has a twist. Therefore, I will ask a question for everyone:

1. Is it possible to send the contents of the contenteditable div by POST and how?

2. is it possible, and if so, how to make the textarea change its height when adding text to the field so that vertical scrolling does not appear? those. give the field the behavior of a div.

Answer 1

As for item 1 - it is possible without additional fields. Get the contents of the div (by id) and send it with a POST in a place with other data. On jQuery it would be something like this:
var text = $('#editablediv').html();
$.post('/ajax.php', {text: text}, function(data) {alert(data);});

Answer 2

For the second:

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

Resetting the height to auto is needed to get the real height. If there was no this reset, then the height would remain at its maximum value (for example, if you delete a line).

Answer 3

what is the problem when submitting the form (with onsubmit) to put the content of the div in the hidden field?

Answer 4

Regarding the second, as an option, try using JS to count the number of line breaks (\n) and change the height depending on them. It might work.

Answer 5

after much deliberation, it was decided to abandon this type of uniform. eventually came to jquery.ui markup a la jsfiddle. only here on jsfiddle iframes. I did it on textarea.