Можно ли передать div с contenteditable = true через форму?

Question

Можно ли использовать <div contenteditable="true"><a href="page.html">Some</a> Text</div> вместо texarea, а затем как-нибудь передать через форму?

Идеально без JS

Answer 1

Как использовать HTML5, как использовать contenteditable поля при отправке формы?

Редактируемый контент не работает как элемент формы. Только javascript может позволить ему работать.

РЕДАКТИРОВАТЬ: В ответ на ваш комментарий ... Это должно работать.

<script>
    function getContent(){
        document.getElementById("my-textarea").value = document.getElementById("my-content").innerHTML;
    }
</script>


<div id="my-content" contenteditable="true"><a href="page.html">Some</a> Text</div>

<form action="some-page.php" onsubmit="return getContent()">
    <textarea id="my-textarea" style="display:none"></textarea>
    <input type="submit" />
</form>

Я проверил и подтвердил, что это работает в FF и IE9.

Answer 2

Попробуйте это

document.getElementById('formtextarea').value=document.getElementById('editable_div').innerHTML;

полный пример: -

<script>
    function getContent() {
        var div_val = document.getElementById("editablediv").innerHTML;
        document.getElementById("formtextarea").value = div_val;
        if (div_val == '') {
            //alert("option alert or show error message")
            return false;
            //empty form will not be submitted. You can also alert this message like this.
        }
    }
</script>

`

<div id="editablediv" contenteditable="true">
<a href="page.html">Some</a> Text</div>
<form id="form" action="action.php" onsubmit="return getContent()">
    <textarea id="formtextarea" style="display:none"></textarea>
    <input type="submit" />
</form>

`

Вместо этого,Вы можете использовать JQuery (если есть ограничения на использование JQuery для автоматического изменения размера текстовой области или любого текстового редактора WYSIWYG)

Answer 3

Без JS это не представляется возможным, к сожалению. Если кому-то интересно, я исправил решение с VueJS для аналогичной проблемы. В моем случае у меня есть:

<h2 @focusout="updateMainMessage" v-html="mainMessage" contenteditable="true"></h2>
<textarea class="d-none" name="gift[main_message]" :value="mainMessage"></textarea>

В «data» вы можете установить значение по умолчанию для mainMessage, а в методах, которые у меня есть:

methods: {
  updateMainMessage: function(e) {
    this.mainMessage = e.target.innerText;
  }
}

"d-none" - это класс Boostrap 4 для отображения none. Все просто, и тогда вы можете получить значение поля contenteditable внутри "gift [main_message]" во время обычной отправки формы, например. Я не заинтересован в форматировании, поэтому «innerText» работает лучше, чем «innerHTML» для меня.

Answer 4

Вы могли бы лучше использовать:

<script>
    function getContent(){
        document.getElementById("my-textarea").value = document.getElementById("my-content").innerText;
    }
</script>

ПРИМЕЧАНИЕ : я изменил innerHTML на innerText. Таким образом, вы не получаете элементы HTML и текст, а только текст.

Пример : Я поставил «текст», innerHTML дает значение: «\ r \ n текст». Он отфильтровывает «текст», но длиннее 4 символов. innerText дает значение "текст".

Это полезно, если вы хотите посчитать символы.