如何在多个输入字段上使用jquery keyup

Question

我试图将多个输入字段的值输出到单个div中。但我就是不能让它工作。它一次只输出一个输入字段到div中。

这是我的jquery:

var $output = $('#output-content-here');
  $('input').keypress( function() {
  $($output).text(this.value);
});

我已经做了一个jsiddle来告诉你我的意思:http://jsfiddle.net/A7UbK/1/

谢谢。

Answer 1

使用 .map()

尝试下面的代码

var $output = $('#output-content-here');
$('input').keyup(function () {
    $output.html(function () {
        return $('input').map(function () {
            return this.value
        }).get();
    })
});

注意: $output已经包含jQuery对象

Answer 2

试试，

var $output = $('#output-content-here');
$('input').keyup( function() {
    $output.html($('input').map(function(){
        return this.value + ((this.value.length)?"<br>":"");
    }).get().join(''));
});

演示

Answer 3

如其他答案所示，您可以每次将map值放入div元素中。

我个人认为更整洁的方法是在div中嵌套3个元素，每个输入1个，并将值直接应用于每个相关元素。

这意味着你只更新已编辑的字段，而不是整个div html。

Name<input id="name" type="text" name="name" /> <br />
Besked<input id="message" type="text" name="message" /> <br /> 
Number<input id="number" type="text" name="number" /> <br /> 
<div id="output-content-here">
    <span class="name"></span>
    <span class="message"></span>
    <span class="number"></span>
</div>
var $output = $('#output-content-here');
$('input').keyup( function() {    
    $output.find("." + this.id).text(this.value);
});

http://jsfiddle.net/A7UbK/13/