Question

我有一个div框，里面有一些文字。如何通过用户输入更改文本？我希望当用户点击div框时，输入字段应该显示，然后用户可以输入一些文本，并且应该更新。

<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

您可以使用HTML5的contenteditable属性。

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>

因此阻止在代码段编辑器中使用localStorage。以下是使用localStorage保存对可信任div的更改的小提琴：https://jsfiddle.net/0rqhmmg3/

Answer 3

我相信您问题的关键部分在于：and it should be updated

我怀疑你的意思是你想要以某种方式保存用户输入的文字。

您有两种选择：前端（localstorage）和后端（PHP or ASP.Net）

对于localstorage，要保存的代码如下所示：

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

并检索它：

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

对于PHP，您可以使用<form>或使用AJAX：

参考文献：

localstorage info

PHP Forms

Info about AJAX

注意：PHP很常见 - 它附带大多数共享主机软件包（GoDaddy，Hostgator，Namecheap等）。如果您希望在本地计算机上使用它，请安装一个名为XAMPP的免费软件包 - 它包含OSX，Windows和Linux发行版。 请注意，文件会进入xampp/htdocs，您只需在浏览器地址栏中输入localhost即可查看该网站。

获取div的文本并通过用户输入进行更改

3 个答案: