Question

我有这个for循环，每次创建一个新的div contenteditable：

for($i=0; $i<$something; $i++){
   echo '<div id='.$value[$i].' contenteditable></div>';
}

现在我想让每个div都有自己的价值并使用它。这不应该那么难，但我从未使用过这个属性，并且没有很多关于这个属性的信息。此外，我希望每当有些事情发生变化时都会显示出价值。所以基本上是一个不变的事件。这些值将用于查询中。事情是我似乎无法弄清楚如何使用这个（我也没有很多javascript的经验）。

每次更改这些div时，我如何获得这些div的价值并用他们的div id来显示它们？

Answer 1

首先，您可以为所有div添加“类”以快速访问它们：

for ($i=0; $i<$something; $i++){
   echo '<div id='.$value[$i].' class="editable" contenteditable></div>';
}

您可以使用jQuery在div上获取“input”事件并检索值和id - 例如：http://jsfiddle.net/se2nj78L/

$(".editable").on("input",function(){
        var id=$(this).attr("id");
        var html="<p>Content changed in div with id="+id+"</p>";
        html+=$(this).html();
       $("#feedback").html(html);
});

仅使用JS，它将类似于：

var editable_divs= document.getElementsByClassName("editable");

for (var i=0; i<editable_divs.length; i++) {
    editable_divs[i].addEventListener("input",
        function () { /* some function */}
        ,false);
}

对于简单的JS：http://jsfiddle.net/87vv4vg1/1/

编辑：

要获取所有已更改的div内容，您可以将功能更改为以下内容：http://jsfiddle.net/7me8okgd/

基本上你把所有的变化放在一个大的对象中，每个id都有你改变的div内容 - 例如：

var div_changes = {};
/* var div_changes = {
     1: "Content from div with id='1'",
     2: "Content from did with id='2'",
     ...
 } 
 */

for (var i=0; i<editable_divs.length; i++) {
    editable_divs[i].addEventListener("input",
        function () { 
            div_changes[this.id]=this.innerHTML;
        }
        ,false);
}

之后您可以将此对象用于多种用途（例如通过AJAX发送）。

Answer 2

这是一个选择。只需向所有可编辑元素添加keyup侦听器，然后收集每个元素的innerHTML。要获取当前可编辑元素id，只需在this处理程序中使用keyup。

当然你会明白这一点。

＆＃13;

var editableElems = document.querySelectorAll('.edit'),
    output = document.getElementById('output'),
    crntId = document.getElementById('current-id');

function collectData() {
  var editableElemsArray = Array.prototype.slice.call(editableElems);
  output.innerHTML = "";
  editableElemsArray.forEach(function(value, index, array) {
    output.innerHTML += value.innerHTML;
  });
}

function editKeyUpHndl() {
  crntId.innerHTML = this.getAttribute('id');
  collectData();
}

for(var i = 0;  i < editableElems.length; i++) {
  editableElems[i].addEventListener('keyup', editKeyUpHndl, false);
}

＆＃13;

html {
  box-sizing: border-box;
  font-family: sans-serif;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.edit {
  width: 100%;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: inset 1px 1px 1px #fff, inset 0 -1px 2px #111;
  color: #888;
  min-height: 100px;
  padding: 2px 6px;
  margin-bottom: 6px;
  font-family: sans-serif;
  font-size: 85%;
  overflow: auto;
}

.container {
  position: relative;
}

#output {
  width: 100%;
  border: 1px solid #ccc;
  min-height: 100px;
  border-radius: 3px;
  padding: 4px;    
}

#current-id {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #ddd;
  height: 34px;
  min-width: 120px;
  width: auto;
  border: 1px solid #ccc;
  border-radius: 3px;
  opacity: 0.6;
  text-align: center;
  padding: 6px;
  font-size: 80%;
  color: red;
}

＆＃13;

<div class="edit" id="edit-box-01" contenteditable>
  <p>Edit One</p>
</div>

<div class="edit" id="edit-box-02" contenteditable>
  <p>Edit Two</p>
</div>

<div class="edit" id="edit-box-03" contenteditable>
  <p>Edit Three</p>
</div>

<div class="container">
  <div id="current-id"> </div>
  <div id="output"></div>    
</div>

＆＃13;

获得多个＆＃34; contenteditables的价值＆＃34;在javascript中

2 个答案: