get text of div and change it through user input

Question

I have a div box and it has some text in it. How can I change the text through user input ? I want that when a user click on the div box the input field should show up and then user can input some text and it should be updated.

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

score 1 · Answer 1 · answered Apr 14 '16 at 21:21

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>

answered Apr 14 '16 at 21:21

marzelin

10,790
2
30
49

You should use the `input` event instead of `keyup` if possible. – Joseph Marikle Apr 14 '16 at 21:22

Joseph Marikle · Answer 2 · 2016-04-14T21:57:33.043

1

You could just use HTML5's contenteditable attribute.

document.querySelectorAll('[contenteditable=true][id]').forEach(function(el){
  cardBodyData = JSON.parse(localStorage.getItem('card-body-data'));
  el.addEventListener('input', function(){
   cardBodyData[el.id] = this.innerHTML;
    localStorage.setItem('card-body-data',JSON.stringify(cardBodyData));
  });
  if(cardBodyData && cardBodyData[el.id]) {
   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>

SO prevents the use of localStorage in the snippet editor. Here's a fiddle using localStorage to save changes to the contenteditable div: https://jsfiddle.net/0rqhmmg3/

edited Apr 14 '16 at 21:57

answered Apr 14 '16 at 21:24

Joseph Marikle

76,418
17
112
129

@MahimParsai How permanent do you want it to be? You could use local storage to retain the changes, but it won't remain if the person clears their cache and local data. What exactly is the application for having the user change the content? – Joseph Marikle Apr 14 '16 at 21:38
@MahimParsai Here's a blog that uses contenteditable and localstorage: https://www.ibm.com/developerworks/community/blogs/bobleah/entry/html5_code_example_of_contenteditable_and_localstorage_create_a_web_sticky_note?lang=en – Joseph Marikle Apr 14 '16 at 21:40
@MahimParsai I've updated my answer to have a `localStorage` demo on jsfiddle. – Joseph Marikle Apr 14 '16 at 21:58

score 0 · Answer 3 · edited May 23 '17 at 12:31

I believe the key part of your question is here: and it should be updated

I suspect you mean that you want the text typed by the user to be saved somehow.

You have two options: front-end (localstorage) and back-end (PHP or ASP.Net)

For localstorage, the code to save looks like this:

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

and to retrieve it:

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

For PHP, you can either use a <form> or use AJAX:

References:

localstorage info

PHP Forms

Info about AJAX

Note: PHP is very common - it comes with most shared hosting packages (GoDaddy, Hostgator, Namecheap, etc). If you wish to play with it on your local computer, install a free package called XAMPP - it has OSX, Windows and Linux distros. Note that files go into xampp/htdocs, and you view the website by typing ONLY localhost into the browser address bar.

Also see: http://stackoverflow.com/questions/28676358/unable-to-load-assets-when-testing-website-localy/28676901#28676901 — cssyphus, Apr 14 '16 at 21:50

get text of div and change it through user input

3 Answers3