Question

我正在尝试在用户填充另一个输入时禁用输入。我已设法禁用其中一个输入，而另一个输入正在填写。

问题是我希望在输入其他输入时禁用禁用的输入。因此，如果用户在第一个输入上改变主意，他们可以删除当前输入中的内容，使第二个输入可用，第一个输入可用。

JS

var inp1 = document.getElementById("input1");
inp1.onchange = function () {
   if (this.value != "" || this.value.length > 0) {
      document.getElementById("input2").disabled = true;
   }
}

HTML

<input type="text" id="input1">
<input type="text" id="input2">

Answer 1

首先，我会使用input而不是change。然后，如果输入为空，则需要将disabled设置回false。您检查它是否为空白是多余的，您既不是||的任何一方，也不是两者。

所以：

＆＃13;

var inp1 = document.getElementById("input1");
inp1.oninput = function () {
    document.getElementById("input2").disabled = this.value != "";
};

＆＃13;

<input type="text" id="input1">
<input type="text" id="input2">

＆＃13;

...然后当然如果你想要它是相互的，那么对于input2。

Answer 2

您可以使用焦点和模糊来实现此目的。下面是用JQuery完成的。

＆＃13;

$(function() {
    $('#input1').focus(function(){
      $('#input2').prop('disabled', 'disabled');
    }).blur(function(){
     $('#input2').prop('disabled', '');
    });
    
    $('#input2').focus(function(){
      $('#input1').prop('disabled', 'disabled');
    }).blur(function(){
     $('#input1').prop('disabled', '');
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input1">
<input type="text" id="input2">

＆＃13;

Answer 3

如何使用keyup？

喜欢这个;

var inp1 = document.getElementById("input1");

var inp2 = document.getElementById("input2");

inp1.onkeyup = function() { inputValidation(this, inp2); }

inp2.onkeyup = function() { inputValidation(this, inp1); }

function inputValidation(origin, lock) {
  var response = hasValue(origin.value);
  lock.disabled = response;
}

function hasValue(value) {
  return value != "" && value.length > 0;
}

https://jsfiddle.net/8o3wwp6s/

Answer 4

不要让它变得更难，这很简单。

＆＃13;

var one = document.getElementById('one');
var two = document.getElementById('two');

//checks instantly 
var checker = setInterval(function() {
    if(two.value !== '') {
      one.disabled = true;
    } else {
      //when its clear, it enabled again
      one.disabled = false;
    }
    if(one.value !== '') {
      two.disabled = true
    } else {
      two.disabled = false;
    }
}, 30);

＆＃13;

<input id="one">
<input id="two">

＆＃13;

如果填充了第二个输入字段，则暂时禁用输入字段

4 个答案: