Question

我试图将多个输入字段的值输出到一个div中。但我根本无法让它发挥作用。它一次只会将一个输入字段输出到div中。

这是我的jquery：

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

我已经向你展示了我的意思：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();
    })
});

<强> Demo

注意：$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(''));
});

DEMO

Answer 3

在显示其他答案时，您可以map每次将div元素放入div元素。

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

这意味着您只更新已编辑的字段，而不是整个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); }); html。

{{1}}

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

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

3 个答案:

DEMO