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()尝试了该方法，但是没有用。我想获取输入或textarea的内容，并将其输出到具有相应ID的div中。因此，“年龄”应该输出为“改变”，依此类推。我不确定如何实现此目标，并且w3schools或其他网站没有提供答案。

Answer 1

您可以这样做：

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

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

Answer 2

您可以通过在输入文本框中添加一个input事件监听器来做到这一点。在下面的示例中，我使用text-input循环遍历所有输入文本框（为它们提供了forEach类）。然后，您可以使用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中输入的输出内容

2 个答案: