Question

我正在尝试这样做，以便当用户在内容可编辑区域内输入文本后按下按钮时，它将根据用户在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;
}

example image

Answer 1

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

注意：此代码如果您需要.text()但需要.html() 两者都使用.html()代替.text() ..您可以查看What is the difference between jQuery: text() and 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>

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

1 个答案: