创建表单输入的实时预览

Question

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

到目前为止，我已经构建了表单并使用以下

取得了一些成功

的.js

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

html的

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

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

我打算通过jquery调用每个元素id，但是有另一种方法来使用类或.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

Answer 2

因为 追加 值。如果您不想保留文本，请使用

.text（）或.html（）

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

JSFiddle

Answer 3

您需要有一些特定的元素来放置内容，您可以将行更改为：

<div id="preview">
    <div>Input Label: <span id="val"></span></div>
</div>

然后使用您的jQuery，您可以定位#val

但是，您仍然希望实际替换值...不附加到它，所以请使用以下内容：

$("#val").html($("input[type='text']").val());

  

请注意使用html()代替append()