Può div con contenteditable = true essere passato attraverso il modulo?

Question

È possibile utilizzare <div contenteditable="true"><a href="page.html">Some</a> Text</div> anziché texarea e quindi passare in qualche modo attraverso il modulo?

idealmente senza JS

Answer 1

Using HTML5, how do I use contenteditable fields in a form submission?

contenuto modificabile non funziona come un elemento del modulo. Solo javascript può consentirne il funzionamento.

MODIFICA: In risposta al tuo commento ... Questo dovrebbe funzionare.

<script type="text/javascript"> 
    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 id="form" action="some-page.php" onsubmit="return getContent()"> 
    <textarea id="my-textarea" style="display:none"></textarea> 
    <input type="submit" /> 
</form> 

Ho testato e verificato che questo funziona in FF e IE9.

Answer 2

provare questo

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

un esempio completo: -

<script type="text/javascript"> 
    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 submit. 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> 

`

invece di questo si può utilizzare JQuery (se non v'è il limite per utilizzare JQuery per auto-ridimensionamento textarea o qualsiasi editor di testo WYSIWYG)

Answer 3

Si potrebbe utilizzare meglio:

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

NOTA: ho cambiato .innerHTML a innerText. In questo modo non ottieni elementi HTML e testo ma solo testo.

Esempio: Ho Inserito "testo", innerHTML dà il valore: "\ r \ n testo". Filtra "testo" ma è più lungo di 4 caratteri. innerText indica il valore "testo".

Questo è utile se si desidera contare i caratteri.