如何使用 jQuery 将文本从 Contenteditable div 输出到另一个 div

debugcn 发表于 Dev

安德鲁·李

我试图做到这一点，当用户在内容可编辑区域内输入文本后按下按钮时，它会根据用户在 contenteditable 字段中输入的内容将其粘贴到另一个 div。该函数将根据用户输入的每一行进行粘贴。

下面是提供的代码和我想要结果的示例图片。当前，当按下按钮时，它会给出 [object Object] 的输出。任何帮助都会很棒。谢谢！

    <html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title> VERO Filter Program</title>
</head>

<body>
    <div id="pbf-container">
        <div class="pbf-header">
            <h1> VERO Filter Program </h1>
            <h3> Input Links Here </h3>
        </div>
            <div class="pbf-link-container" contenteditable="true">
            </div>
                <div class="pbf-button-control">
                    <button id="pbf-filter"> Filter </button>
                </div>
                    <div class="pbf-link-output">
                    </div>
    </div>
    <script>
        var $pbfOutput = $('.pbf-link-container[contenteditable]');
        $('#pbf-filter').click(function(){
            $('.pbf-link-output').text($pbfOutput);
        });
    </script>
</body>

</html>

这是css

/* DIV class and ID's */

#pbf-container {
    display: block;
    width: 1080px;
    margin: 0 auto;
    background-color: #333;
    padding: 3%;
}

.pbf-header {
    text-align: center;
}

.pbf-link-container {
    width: 1080px;
    min-height: 300px;
    background-color: #f8f8f8;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
}

.pbf-button-control {
    text-align: center;
    padding: 2%;
}

.pbf-link-output {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    color: #fff;
}

示例图像

穆罕默德-优素福

您需要使用var $pbfOutput = $('.pbf-link-container[contenteditable]').text();它并将其包装在按钮单击功能中。

注意：如果您需要此代码，.text()但如果您需要.html()使用.html()而不是.text()两者。您可以查看jQuery: text() 和 html() 之间的区别是什么？

代码与 .text()

$('#pbf-filter').click(function(){
    var $pbfOutput = $('.pbf-link-container[contenteditable]').text();
    $('.pbf-link-output').text($pbfOutput);
});

#pbf-container {
    display: block;
    width: 1080px;
    margin: 0 auto;
    background-color: #333;
    padding: 3%;
}

.pbf-header {
    text-align: center;
}

.pbf-link-container {
    width: 1080px;
    min-height: 300px;
    background-color: #f8f8f8;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
}

.pbf-button-control {
    text-align: center;
    padding: 2%;
}

.pbf-link-output {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pbf-container">
<div class="pbf-header">
    <h1> VERO Filter Program </h1>
    <h3> Input Links Here </h3>
</div>
    <div class="pbf-link-container" contenteditable="true">
    </div>
        <div class="pbf-button-control">
            <button id="pbf-filter"> Filter </button>
        </div>
            <div class="pbf-link-output">
            </div>
</div>

代码与 .html()

$('#pbf-filter').click(function(){
    var $pbfOutput = $('.pbf-link-container[contenteditable]').html();
    $('.pbf-link-output').html($pbfOutput);
});

#pbf-container {
    display: block;
    width: 1080px;
    margin: 0 auto;
    background-color: #333;
    padding: 3%;
}

.pbf-header {
    text-align: center;
}

.pbf-link-container {
    width: 1080px;
    min-height: 300px;
    background-color: #f8f8f8;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
}

.pbf-button-control {
    text-align: center;
    padding: 2%;
}

.pbf-link-output {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pbf-container">
<div class="pbf-header">
    <h1> VERO Filter Program </h1>
    <h3> Input Links Here </h3>
</div>
    <div class="pbf-link-container" contenteditable="true">
    </div>
        <div class="pbf-button-control">
            <button id="pbf-filter"> Filter </button>
        </div>
            <div class="pbf-link-output">
            </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。