代码之家 › 专栏 › 技术社区 › user3108268

手动输入时复制值,但单击时不会自动复制值

jquery javascript

user3108268 · 技术社区 · 5 年前

两个字段 input1 input2 总计 input3 单击时,需要将其复制到下一个 input4 但它没有。

但如果输入值手动复制?(事实上,只有当你点击tab键或鼠标点击任何地方,它才会被实时复制,也不知道如何解决)

完整代码 https://jsfiddle.net/tn6wr4xc/1/

所以基本上当你点击第一个 Sum 输入4 ,但不是,只有手动输入时。

抱歉,我知道这是香草和jQuery,真正的初学者。

1 回复 | 直到 5 年前

Mamun 5 年前

你应该用输入事件以立即进行更改以输出结果。

首先,可以使用类将所有输入作为目标形式表格使用 querySelectorAll() . 然后循环它们以附加事件( 输入 )使用 forEach() 和 addEventListener() . 在事件处理程序函数中,只能针对与当前元素相关的特定输入。你可以用 map() 和 reduce() . 最后将总和存储在相关元素中。

var inputs = document.querySelectorAll('.formA, .formB');

Array.from(inputs).forEach(function(el){
  el.addEventListener('input', function(){
    var group = this.closest('div').querySelectorAll('[class^=form]');
    var sum = Array.from(group).map(i => Number(i.value)).reduce((a,c) => a+c,0);
    this.closest('div').querySelector('[name=total]').value = sum;
  });
});

<form id="forms">
  <div class="form-a">
    <p>Form A</p>
    input1 : <input class="formA form-1" type="text" name="qty1"/><br>
    input2 : <input class="formA form-2" type="text" name="qty2"/><br>
    input3 (total) : <input class="total-1" type="text" name="total" id="total"/>
  </div>
  <hr>

  <div class="form-b">
    <p>Form B</p>
    input4 : <input class="formB form-3" type="text" name="qty3"/><br>
    input5 : <input class="formB form-4" type="text" name="qty4"/><br>
    input6 (total) : <input type="text" name="total" id="total2"/>
  </div>
  <input type="reset" value="Reset">
</form>