Как использовать jquery keyup для нескольких полей ввода?

Я пытаюсь вывести значения нескольких полей ввода в один div. Но я просто не могу заставить его работать. Он будет выводить только одно из полей ввода в div за раз.

Это мой jquery:

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

Я сделал jsiddle, чтобы показать вам, что я имею в виду: http://jsfiddle.net/A7UbK/1/

Спасибо.


jquery keyup
person Andreas    schedule 10.07.2014    source источник
comment
Общий совет: никогда не делайте двойной перенос объекта jQuery (как в $($output), $output уже является объектом jQuery). Он ничего не делает, но добавляет время выполнения.   -  person UweB    schedule 10.07.2014

Ответы (3)


arrow_upward
2
arrow_downward

Попробуйте использовать следующий код, используя .map().

var $output = $('#output-content-here');

$('input').keyup(function () {
    $output.html(function () {
        return $('input').map(function () {
            return this.value
        }).get();
    })
});

Демо

Примечание. $output уже содержит объект jQuery.

person Shaunak D    schedule 10.07.2014

arrow_upward
1
arrow_downward

Пытаться,

var $output = $('#output-content-here');

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

ДЕМО

person Rajaprabhu Aravindasamy    schedule 10.07.2014
comment
+1, хотя следует использовать keyup, а не keypress, иначе персонаж из текущего события не отображается: jsfiddle. нетто/A7UbK/7 - person Rory McCrossan; 10.07.2014
comment
@RoryMcCrossan, да, обновлял его.. В любом случае, спасибо за поддержку..! - person Rajaprabhu Aravindasamy; 10.07.2014

arrow_upward
0
arrow_downward

По мере отображения других ответов вы можете map значения каждый раз помещать в элемент div.

Лично я думаю, что более аккуратным методом было бы иметь 3 элемента, вложенных в div, по 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/

person Curt    schedule 10.07.2014