Get Text von div und ändern Sie es durch Benutzereingabe

Question

Ich habe eine div-Box und es hat etwas Text drin. Wie kann ich den Text durch Benutzereingaben ändern? Ich möchte, dass, wenn ein Benutzer auf die Div-Box klickt, das Eingabefeld angezeigt werden soll und der Benutzer dann etwas Text eingeben kann und dieser aktualisiert werden sollte.

<div class="update-card-body"> 
<p>I want to change this text.</p> 
</div> 

Answer 1

var displayBox = document.querySelector('.update-card-body>p'); 
 
var input = document.querySelector('.get-text'); 
 
input.addEventListener('keyup', function() { 
 
    displayBox.textContent = input.value; 
 
});

<input class="get-text"> 
 
<div class="update-card-body"> 
 
<p>I want to change this text.</p> 
 
</div>

Answer 2

Sie könnten nur HTML5 des contenteditable Attribut verwenden.

document.querySelectorAll('[contenteditable=true][id]').forEach(function(el){ 
 
    cardBodyData = JSON.parse(localStorage.getItem('card-body-data')); 
 
    el.addEventListener('input', function(){ 
 
\t cardBodyData[el.id] = this.innerHTML; 
 
    localStorage.setItem('card-body-data',JSON.stringify(cardBodyData)); 
 
    }); 
 
    if(cardBodyData && cardBodyData[el.id]) { 
 
    \t el.innerHTML = cardBodyData[el.id]; 
 
    } 
 
    if(cardBodyData === null) cardBodyData = {}; 
 
});

<div id="001" class="update-card-body" contenteditable="true"> 
 
    <p>I want to change this text.</p> 
 
</div> 
 
<div id="002" class="update-card-body" contenteditable="true"> 
 
    <p>I want to change this text.</p> 
 
</div>

verhindert, so dass die Verwendung von localStorage im Snippet Editor. Hier ist eine Geige localStorage mit Änderungen an der contenteditable div speichern: https://jsfiddle.net/0rqhmmg3/

Answer 3

Ich glaube, der Schlüssel Teil Ihrer Frage ist hier: and it should be updated

Ich vermute, Sie meinen, dass sich der Text vom Benutzer eingegebene gespeichert werden irgendwie.

Sie haben zwei Möglichkeiten: Front-End (localstorage) und Back-End (PHP or ASP.Net)

Für localstorage, zu dem Code sieht wie folgt zu speichern:

localStorage.setItem("cardbody", "This is what they typed"); 

und es abzurufen:

$('.update-card-body').text(localStorage.getItem("cardbody")); 

Für PHP, Sie entweder eine <form> verwenden oder verwenden AJAX:

Referenzen:

localstorage info

PHP Forms

Info about AJAX

---

Hinweis: PHP ist sehr häufig - es kommt mit den meisten Hosting-Pakete geteilt (GoDaddy, Hostgator, Namecheap, etc). Wenn Sie damit auf Ihrem lokalen Computer spielen möchten, installieren Sie ein kostenloses Paket namens XAMPP - es hat OSX, Windows und Linux-Distributionen. Beachten Sie, dass Dateien in xampp/htdocs gehen und Sie die Website anzeigen, indem Sie NUR localhost in der Browser-Adressleiste eingeben.