在多个文本框上同时应用onkeyup函数 - applying onkeyup function simultaneously on multiple textboxes

applying onkeyup function simultaneously on multiple textboxes

本文关键字：应用 onkeyup 函数文本 | 更新日期: 2023-09-27

假设我有一列1+7的文本框。第一个框的名称为mm1，其他框分别为dd1、dd2、。。。。，dd7.我想写一个javascript函数，这样文本框dd1，dd2，…中的所有值，。。。，如果我在第一个文本框中放入N，即mm1，则dd7乘以N。我可以编写javascript函数，但如何同时在所有框中发挥作用？我已经尝试了以下代码。但它只能影响一个框，具体取决于$i的值。如果我们可以为$i创建一个取值为1到7的循环，那么问题也许就解决了。请提供任何线索。

<?php $i=3?>
<input type="text" size="1" id="mm1" name="mm1" 
maxlength="2"  onfocus="this.select()"    
onkeyup="gft('dd<?php echo $i?>', 'mm1')"
>

试试这个，用class对元素进行逻辑分组。。。

$('.mult').each(function(i,v){
            var tt = parseFloat($(this).val());
            $(this).attr('data-val',$(this).val());
});
$('.myVal').on('keyup',function(e){
    var t = $(this).val();
    if(!t) t = 0;
    $('.mult').each(function(i,v){
            if(t>0){
                var tt = parseFloat($(this).attr('data-val')) * t;
                $(this).val(tt);
            }
    });
});

在此处查找工作小提琴

function gft(x){
    n = 5;
    c = x * n;
    textInputs[0].value = c;
    textInputs[1].value = c;
    textInputs[2].value = c;
}
var textInputs = document.querySelectorAll('input[type=text]');
//this eventlistener is made to listen for key movement on all text fields that are of type text
for(i=0;i<textInputs.length;i++){
    textInputs[i].addEventListener('keyup',function(){
        //gft will execute an equation whenever one of these fields change
        //also, it will change all the values inside the textfield simultaneously
        gft(this.value);
    },false);
}

我只使用JavaScript（没有jQuery）制作了一个JSFiddle：

HTML

<input type="number" onkeyup="multiply(this)"/>
<input type="number" value="1" class="multiply-this"/>
<input type="number" value="2" class="multiply-this"/>
<input type="number" value="3" class="multiply-this"/>
<input type="number" value="4" class="multiply-this"/>
<input type="number" value="5" class="multiply-this"/>
<input type="number" value="6" class="multiply-this"/>
<input type="number" value="7" class="multiply-this"/>

JavaScript

function multiply(first){
    var value = +first.value;
    var textboxes = document.getElementsByClassName("multiply-this");
    for(var i = 0; i < textboxes.length; i++){
        var textbox = textboxes[i];
        if(textbox.attributes.initialValue){
            textbox.value = textbox.attributes.initialValue.value;
        } else {
            textbox.setAttribute("initialValue", textbox.value);
        }
        textbox.value = +textbox.value * value;
    }
}
window.onload = function(){
    var textboxes = document.getElementsByClassName("multiply-this");
    for(var i = 0; i < textboxes.length; i++){
        var textbox = textboxes[i];
        textbox.onkeyup = function(){
              this.setAttribute("initialValue", this.value); 
        }
    } 
}

我添加了一些功能来记住文本框最初的价值。但是，如果您特别更改了7个相乘的文本框中的一个，您仍然可以更改它。

编辑

如果你想在改变其中一个值后将其相乘，你也可以添加这个：

textbox.onblur = function(){
    multiply(document.getElementById("multiplyer"));
}

JSFiddle