javascript - 创建表单输入的实时预览

Question

我有一个多步骤表单，并且正在尝试创建输入到各种输入、文本区域和单选按钮中的值的实时预览。

到目前为止，我已经构建了表单，并使用以下内容取得了一些成功

.js

$("input[type='text']").change(function() {
    $("#preview").append($("input[type='text']").val());
});

.html

<div id="preview"></div>

这适用于第一个输入，但第二个输入会重复第一个输入的值。

我本来打算对每个元素 id 进行 jquery 调用，但是还有另一种方法来使用类或 .next 等。我希望最好先重复输入标签，然后重复冒号，然后是值。那么在.html中这可能吗？

<div id="preview">
    <div>Input Label: Input Value</div>
</div>

Answer 1

简单

$('.input').keyup(function(){
    var $this = $(this);
    $('.'+$this.attr('id')+'').html($this.val());
});

<强> FIDDLE