让一个输入字段自动更新另一个输入字段，反之亦然（可能使用 JavaScript）

Question

我在 JavaScript 方面经验不足，因此需要一些项目帮助。

我有一个表单，其中包括 3 个输入文本字段（我们称它们为 A、B 和 C）。我需要用户只能输入 A+B OR C。因此，一旦用户单击另一个表单字段（反之亦然），是否可以使表单字段处于非活动状态。

非常感谢任何帮助。我的猜测是这不需要在 JavaScript 中完成。

Answer 1

HTML

<input class="onlyone" id="first" />
<input class="onlyone" id="second" />
<input class="onlyone" id="third" />

JavaScript

document.querySelectorAll('.onlyone').addEventListener('click', function(){
if(this.getAttribute('disabled') != 'disabled'){ // check if it was disabled before

   for(var i=0; i<document.querySelectorAll('.onlyone').length; i++){
    document.querySelectorAll('.onlyone')[i].setAttribute('disabled, 'disabled'); //disable em all
   }

   this.removeAttribute('disabled'); //enable this one
}
}, false);

Answer 2

您可以为此编写一个 JavaScript，如下所示进行绑定

<script>
function fun(ele){
var elea=document.getElementById('a');
var eleb=document.getElementById('b');
var elec=document.getElementById('c');
if (ele.id='a' &&(eleb.length==0 || elec.length==0))
{
      this.readonly=false;
}
if (ele.id='b' && (elea.length==0 || elec.length==0))
{
       this.readonly=false;
}
if (ele.id='c' && (elea.length==0 || eleb.length==0))
{
       this.readonly=false;
}

}
</script>
<input type="text" id="a" onfocus="fun(this)" readonly="true"/>
<input type="text" id="b" onfocus="fun(this)" readonly="true"/>
<input type="text" id="c" onfocus="fun(this)" readonly="true"/>

您还可以动态绑定事件而不是内联，请参阅 Javascript 绑定事件监听器的四种方式