div 中输入的输出内容

Question

我正在创建一个联系表单，它会根据输入创建类似购物车视图的内容。

我设法让所有复选框在选中时输出；我在使用文本和数字输入时遇到了同样的问题。所以输入类型文本、数字和文本区域。

<input id="form_name" type="text" name="name" class="form-control"
       placeholder="Please enter your firstname *" required="required"
       data-error="Pflichtfeld" data-validate="true">

<input type="number" id="age" name="age" min="16" max="99"
       class="form-control" required="required"
       data-error="Pflichtfeld" data-validate="true">

<div id="descript11" style="display:none;">Vorname:
  <b id="vorname"></b>
</div>

<div id="descript12" style="display:none;">Alter:
  <b id="alter"></b>
</div>

所以我尝试了 $(document).change() 的方法，但没有用。我想抓取input或者textarea的内容输出到对应id的div。所以 "age" 应该输出到 "alter" 等等。我不确定如何实现此目的，w3schools 或其他网站未提供答案。

Answer 1

你可以这样做：

$('input').on('input',function(){
    let text = $(this).val();
    let id = $(this).attr('id');
    $('div.'+id).text(text)
});

此代码段检查输入的更改并将其值设置为 div 和 class 匹配每个输入的 id 。

Answer 2

您可以通过向输入文本框添加 input 事件侦听器来实现。在下面的示例中，我使用 forEach 循环遍历所有输入文本框（因为我给了它们一个 text-input 的 class）。然后，您可以使用 this.value 从文本框中获取文本并将其放入关联的 div 中。为了解决这个问题，我创建了一个映射对象，用于将输入的 id 映射到应该放置文本的位置的 ID。

参见下面的示例：

const input_map = {
  form_name: "vorname",
  age: "alter"
}

document.querySelectorAll(".text-input").forEach(elem => {
  elem.addEventListener('input', function() {
    const textbox_value = this.value; // get text from input bpx
    const target = input_map[this.id]; // get location (ie: the id) of where the text should be placed
    document.getElementById(target).innerText = textbox_value; // place the text in that location
  });
});

<input id="form_name" type="text" name="name" class="form-control text-input" placeholder="Please enter your firstname *" required="required" data-error="Pflichtfeld" data-validate="true">

<input type="number" id="age" name="age" min="16" max="99" class="form-control text-input" required="required" data-error="Pflichtfeld" data-validate="true">

<div id="descript11">Vorname:<b id="vorname"></b></div>
<div id="descript12">Alter: <b id="alter"></b></div>

注意：在上面的示例中，我从您的 div 中删除了 style="display: none;"，以便您可以看到输出

div 中输入的输出内容

Output Contents of Input in div

javascript

onchange