Захват события нажатия клавиши на серии элементов <input>и суммирование значений - PullRequest
Новая
       18

Захват события нажатия клавиши на серии элементов <input>и суммирование значений

1 голос
/ 23 декабря 2011

У меня есть серия входных текстовых элементов с массивными именами, такими как p_at[0][int], p_at[1][int], ....Мне нужно поймать событие onKeypress для каждого input на странице, чтобы получить сумму.Обратите внимание, что входы генерируются динамически.Я пытался решить ее разными способами, но у меня ничего не получалось. 

<input type="text"  value="1" name="p_at[0][65]">
<input type="text"  value="1" name="p_at[0][66]">
<input type="text"  value="1" name="p_at[0][67]">
<input type="text"  value="1" name="p_at[0][68]">
<input type="text"  value="1" name="p_at[0][69]">
    <input type="text"  value="0" name="sum[0]">
<input type="text"  value="1" name="p_at[1][65]">
<input type="text"  value="1" name="p_at[1][66]">
<input type="text"  value="1" name="p_at[1][67]">
<input type="text"  value="1" name="p_at[1][68]">
<input type="text"  value="1" name="p_at[1][69]">
     <input type="text"  value="0" name="sum[1]">

Ответы [ 3 ]

1 голос
/ 23 декабря 2011

Оберните их в div, например, <div id='wrap'> и назначьте обработчик события этому div: 

$("#wrap").keyup(function() {
    calculate the sum
})

Полный рабочий пример: http://jsfiddle.net/fkpFX/

1 голос
/ 24 декабря 2011

Очень неэффективно добавлять прослушиватели событий для каждого входа. Вместо этого используйте делегата (поместив одного слушателя на родителя). Добавьте прослушиватель событий к <form> (в моем примере я назвал его sums).

Демо: http://jsfiddle.net/ThinkingStiff/KWTLu/

Сценарий: 

document.getElementById( 'sums' ).addEventListener( 'keyup', function ( event ) {

    if( event.target.name.substr( 0, 4) == 'p_at' ) {

        var index = event.target.name.substr( 5, 1 ),
            inputs = document.querySelectorAll( 'input[name^="p_at\[' + index + '"]' ),
            value = 0;

        for ( var i = 0; i < inputs.length; i++ ) {
            value += window.Number( inputs[i].value ) || 0;
        };

        document.getElementsByName( 'sum[' + index + ']' )[0].value = value;

    };

}, false );

HTML: 

<form id="sums">
    <input type="text"  value="1" name="p_at[0][65]">
    <input type="text"  value="1" name="p_at[0][66]">
    <input type="text"  value="1" name="p_at[0][67]"><br />
        <input type="text"  value="0" name="sum[0]"><br />
    <input type="text"  value="1" name="p_at[1][65]">
    <input type="text"  value="1" name="p_at[1][66]">
    <input type="text"  value="1" name="p_at[1][67]"><br />
         <input type="text"  value="0" name="sum[1]">
</form>
1 голос
/ 23 декабря 2011

Нет ответа jQuery 

var inputlist = document.getElementsByTagName('input');

var inputListener = function (evt) {
    //put the code that handles the event here
};

for( var i = 0; i < inputlist ){
    if( inputlist[i].type === "text" && inputlist.name.substr(0,4) === "p_at" ){
        if (elem.addEventListener)  // W3C DOM
            elem.addEventListener("Keypress",inputListener ,false);
        else if (elem.attachEvent) { // IE DOM
            elem.attachEvent("onKeypress", inputListener );
    }
    }
}

С ответом jQuery 

$('input[type="text"][name^="p_at"]').keypress(function(evt){
    //put the code that handles the event here
});
...