2017-06-10 4 views
0

Ich versuche, es so zu machen, dass, wenn ein Benutzer eine Taste nach der Eingabe von Text innerhalb eines editierbaren Inhaltsbereichs drückt es in ein anderes Div basierend auf was der Benutzer einfügen im zufriedenen Feld eingegeben. Die Funktion fügt basierend auf jeder einzelnen Zeile die Benutzereingaben ein.Wie man Text von einem Contenteditable Div zu einem anderen Div mit jQuery

Unten ist der Code zur Verfügung gestellt und ein Bild von einem Beispiel dafür, wie ich das Ergebnis wollen. Momentan, wenn die Taste gedrückt wird, gibt es eine Ausgabe von [Objekt Objekt]. Jede Hilfe wäre großartig. Vielen Dank!

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

Hier ist die 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

+0

'var $ pbfOutput = $ ('PBF-Link-Container [contenteditable].') Text (.),' –

+0

Wollen Sie die Ausgabe als Text, der den Code darstellt? Oder möchten Sie echte DOM-Objekte? – zer00ne

Antwort

1

Sie müssen var $pbfOutput = $('.pbf-link-container[contenteditable]').text(); verwenden und sie in die Schaltfläche Klickfunktion wickeln.

Hinweis: Dieser Code, wenn Sie benötigen die .text() aber wenn Sie benötigen .html() Verwendung .html() statt .text() für beide .. Sie einen Blick auf What is the difference between jQuery: text() and html() ?

Code mit .text() nehmen

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

Code mit .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>

+0

Hallo, vielen Dank. Der von Ihnen angegebene Code funktioniert! Ich habe deine Antwort aufgefrischt. Sehr geschätzt. – Publifiedlabs

+0

@Publifiedlabs Gern geschehen, aber lesen Sie bitte die vollständige Antwort, um den Unterschied zwischen '.text()' und '.html()' .. zu verstehen. Einen schönen Tag :-) –

+0

Ich tat :), ich benutze HTML für meinen Zweck, weil der Link, den Sie angegeben haben, sagt, dass es schneller lädt. Nochmals vielen Dank und einen schönen Tag. – Publifiedlabs

Verwandte Themen