コンテンツエディタdivから別のdivにjQueryで出力する方法

コンテンツ編集可能エリア内にテキストを入力した後にボタンを押すと、ユーザーが何を編集したかに基づいて別のdivに貼り付けます内容編集可能フィールドに入力される。この関数は、ユーザーが入力した個々の行に基づいて貼り付けられます。コンテンツエディタdivから別のdivにjQueryで出力する方法

以下は、提供されるコードと、結果をどのようにしたいかの例の写真です。現在、ボタンを押すと、[オブジェクトオブジェクト]の出力が得られます。どんな助けも素晴らしいだろう。ありがとう！ここで

<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>

はあなたがvar $pbfOutput = $('.pbf-link-container[contenteditable]').text();を使用すると、ボタンのクリック機能でそれをラップする必要がある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

出典

2017-06-10 Publifiedlabs

'VAR $ pbfOutput = $（ 'PBF-リンクコンテナ[のcontentEditable]'）でテキスト（）;' –

がやったあなたが欲しいですコードを表すテキストとして出力しますか？または、実際のDOMオブジェクトが欲しいですか？ – zer00ne

です。

注：このコードあなたは.text()を必要とするが、あなたは.html() 使用.html()の代わりに、両方のための.text()が必要な場合..あなたは.text()
と What is the difference between jQuery: text() and html() ?

コードを見てみることができるかどうか

$('#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>

出典

2017-06-10 00:45:43

こんにちは、ありがとうございました。あなたが提供したコードは動作しています！私はあなたの答えをupvotedしています。非常に高く評価。 – Publifiedlabs

@Publifiedlabsあなたは歓迎ですが、 '.text（）'と '.html（）'の違いを知るための完全な答えを読んでください..素晴らしい一日:-) –

私は:)、私はhtmlを使用しています私の目的のために、あなたが提供したリンクがより速くロードすると言うからです。おかげさまで、ありがとうございました。 – Publifiedlabs

コンテンツエディタdivから別のdivにjQueryで出力する方法

答えて

関連する問題