Home / Questions / 409578
Accepted
Mary
Asked: 2021-11-25 11:20:26 +0800 CST 2021-11-25 11:20:26 +0800 CST

How to pass the information contained in a textarea to an editable jquery div?

  • 772

The information that the textareaautomatically has must also pass to the div editable, and vice versa, that is, if I get to write in the div it must also pass in the textareaboth must have a connection, for now I have the following but it does not work:

$(function() {
    let EditHTML = $("#detail");
    EditHTML.on("keyup", function(e) {
        $("#editor").val(EditHTML.html());
        $("#editor").keyup();
    });
});
#editor {
    resize: vertical;
    overflow: auto;
    border: 1px solid silver;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    min-height: 100px;
    padding: 1em;
    background-color: white;
    width: 100%;
    color: #333;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="detail">Esta información debe pasar al div editable y viceversa, es decir todo cambio que se realicen tanto en el textarea con el div editable en ambos se debe mostrar </textarea>
<div id="editor" contenteditable></div>

jquery

1 Answers

  1. Best Answer

    The detail is in the val and the html, you can also have two functions to be able to write the same thing in both elements.

    $(document).ready(function(){
            var EditHTML = $("#detail");
            $("#editor").html(EditHTML.val());
        });
    
$(function() {    
  var EditHTML = $("#detail");
    EditHTML.on("keyup", function(e) {
        $("#editor").html(EditHTML.val());
    });
});

$(function() {
  var EditHTML = $("#editor");
    EditHTML.on("keyup", function(e) {
        $("#detail").val(EditHTML.html());
    });
});
    #editor {
    resize: vertical;
    overflow: auto;
    border: 1px solid silver;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    min-height: 100px;
    padding: 1em;
    background-color: white;
    width: 100%;
    color: #333;
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="detail">Esta información debe pasar al div editable y viceversa, es decir todo cambio que se realicen tanto en el textarea con el div editable en ambos se debe mostrar </textarea>
<div id="editor" contenteditable></div>

    • 2