在 contenteditable 中添加信息并生成内容而不会丢失添加的信息

Question

所以我创建了一个收音机列表，您可以在其中选择 3 个选项（参见代码片段），然后在内容可编辑的区域生成一个报告，其中包含每个收音机的值。

它工作正常，但我希望能够在项目之间写入文本，当您再次按下按钮时，只有项目会改变，但添加的文本会保留。目前，当我生成报告时，它会删除添加的文本（这很正常，因为我在添加文本时用 id="itemXX" 更改了字符串，但我找不到让它工作的方法：/） .

理想情况是每个项目都可以单独更改，而添加的文本会保留。

感谢您的帮助:)

let listA = ["A1", "A2"];
let listB = ["B1", "B2"];

function report() {
    for (i=0; i<listA.length; i++){
    affichageRapport(listA[i]);
  }
    for (i=0; i<listB.length; i++){
    affichageRapport(listB[i]);
  }
}

function affichageRapport (x){
    document.getElementById("item"+x).innerHTML = document.querySelector("input[name="+x+"]:checked").value;
    }

.containers{
  max-width : 500px;
}
.subContainers{
  margin-bottom:10px;
}
.tripleChoice {
    display: flex;
    overflow: hidden;
    float: right;
}
.tripleChoice input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
}
.tripleChoice label {
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    text-align: center;
    padding: 4px 8px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}
.tripleChoice label:hover {
    cursor: pointer;
    background-color: #F9F7F7;
}
.tripleChoice input:checked + label {
    background-color: #3F72AF;
    color: #F9F7F7;
}
.editable{
 border: solid black 1px;
 padding: 10px;
}

<div class="containers">
  <div class="subContainers"><strong>itemA1</strong>
    <div class="tripleChoice">
      <input id="yesA1" name="A1" type="radio" value="item A1 = yes,"/>
      <label for="yesA1">yes</label>
      <input id="noA1" name="A1" type="radio" value="item A1 = no,"/>
      <label for="noA1">no</label>
      <input id="NTA1" name="A1" type="radio" value="item A1 = NT," checked="checked"/>
      <label for="NTA1">NT</label>
    </div>
  </div>
  <div class="subContainers"><strong>itemA2</strong>
    <div class="tripleChoice">
      <input id="yesA2" name="A2" type="radio" value="item A2 = yes."/>
      <label for="yesA2">yes</label>
      <input id="noA2" name="A2" type="radio" value="item A2 = no."/>
      <label for="noA2">no</label>
      <input id="NTA2" name="A2" type="radio" value="item A2 = NT." checked="checked"/>
      <label for="NTA2">NT</label>
    </div>
  </div>
  <div class="subContainers"><strong>itemB1</strong>
    <div class="tripleChoice">
      <input id="yesB1" name="B1" type="radio" value="item B1 = yes,"/>
      <label for="yesB1">yes</label>
      <input id="noB1" name="B1" type="radio" value="item B1 = no,"/>
      <label for="noB1">no</label>
      <input id="NTB1" name="B1" type="radio" value="item B1 = NT," checked="checked"/>
      <label for="NTB1">NT</label>
    </div>
  </div>
  <div class="subContainers"><strong>itemB2</strong>
    <div class="tripleChoice">
      <input id="yesB2" name="B2" type="radio" value="item B2 = yes."/>
      <label for="yesB2">yes</label>
      <input id="noB2" name="B2" type="radio" value="item B2 = no."/>
      <label for="noB2">no</label>
      <input id="NTB2" name="B2" type="radio" value="item B2 = NT." checked="checked"/>
      <label for="NTB2">NT</label>
    </div>
  </div>
  <div class="subContainers">
    <button class="generate" onclick="report()">Create report</button>
  </div>
  <div class="subContainers editable" contenteditable="true">
    <div id="firstPart"/>
      <string id="itemA1"></string>
      <string id="itemA2"></string>
      <p/>
    </div>
    <div id="secondPart"/>
      <string id="itemB1"></string>
      <string id="itemB2"></string>
      <p/>
    </div>
  </div>
 </div>

Answer 1

您可以将报表的可编辑部分移动到“表单输入行”之后的行。我用灰色背景突出显示它们。现在，用户只能编辑这两行。

let listA = ["A1", "A2"];
let listB = ["B1", "B2"];

function report() {
    for (i=0; i<listA.length; i++){
    affichageRapport(listA[i]);
  }
    for (i=0; i<listB.length; i++){
    affichageRapport(listB[i]);
  }
}

function affichageRapport (x){
    document.getElementById("item"+x).innerHTML = document.querySelector("input[name="+x+"]:checked").value;
    }

.containers{
  max-width : 500px;
}
.subContainers{
  margin-bottom:10px;
}
.tripleChoice {
    display: flex;
    overflow: hidden;
    float: right;
}
.tripleChoice input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
}
.tripleChoice label {
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    text-align: center;
    padding: 4px 8px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}
.tripleChoice label:hover {
    cursor: pointer;
    background-color: #F9F7F7;
}
.tripleChoice input:checked + label {
    background-color: #3F72AF;
    color: #F9F7F7;
}
.editable{
 border: solid black 1px;
 padding: 10px;
}

p[contenteditable], span[contenteditable] {
  background: #eee;
  padding: .2em;
  margin: 0;
}

<div class="containers">
  <div class="subContainers"><strong>itemA1</strong>
    <div class="tripleChoice">
      <input id="yesA1" name="A1" type="radio" value="item A1 = yes,"/>
      <label for="yesA1">yes</label>
      <input id="noA1" name="A1" type="radio" value="item A1 = no,"/>
      <label for="noA1">no</label>
      <input id="NTA1" name="A1" type="radio" value="item A1 = NT," checked="checked"/>
      <label for="NTA1">NT</label>
    </div>
  </div>
  <div class="subContainers"><strong>itemA2</strong>
    <div class="tripleChoice">
      <input id="yesA2" name="A2" type="radio" value="item A2 = yes."/>
      <label for="yesA2">yes</label>
      <input id="noA2" name="A2" type="radio" value="item A2 = no."/>
      <label for="noA2">no</label>
      <input id="NTA2" name="A2" type="radio" value="item A2 = NT." checked="checked"/>
      <label for="NTA2">NT</label>
    </div>
  </div>
  <div class="subContainers"><strong>itemB1</strong>
    <div class="tripleChoice">
      <input id="yesB1" name="B1" type="radio" value="item B1 = yes,"/>
      <label for="yesB1">yes</label>
      <input id="noB1" name="B1" type="radio" value="item B1 = no,"/>
      <label for="noB1">no</label>
      <input id="NTB1" name="B1" type="radio" value="item B1 = NT," checked="checked"/>
      <label for="NTB1">NT</label>
    </div>
  </div>
  <div class="subContainers"><strong>itemB2</strong>
    <div class="tripleChoice">
      <input id="yesB2" name="B2" type="radio" value="item B2 = yes."/>
      <label for="yesB2">yes</label>
      <input id="noB2" name="B2" type="radio" value="item B2 = no."/>
      <label for="noB2">no</label>
      <input id="NTB2" name="B2" type="radio" value="item B2 = NT." checked="checked"/>
      <label for="NTB2">NT</label>
    </div>
  </div>
  <div class="subContainers">
    <button class="generate" onclick="report()">Create report</button>
  </div>
  <div class="subContainers editable">
    <div id="firstPart"/>
      <span id="itemA1"></span>
      <span contenteditable="true"></span>
      <span id="itemA2"></span>
      <span contenteditable="true"></span>
      <p contenteditable="true"></p>
    </div>
    <div id="secondPart"/>
      <span id="itemB1"></span>
      <span contenteditable="true"></span>
      <span id="itemB2"></span>
      <span contenteditable="true"></span>
      <p contenteditable="true"></p>
    </div>
  </div>
 </div>

在 contenteditable 中添加信息并生成内容而不会丢失添加的信息

Add information in contenteditable and generate stuff without loosing added infos

html

javascript

forms

contenteditable

radio