Deaktivieren Sie vorübergehend ein Eingabefeld, wenn das zweite Eingabefeld ausgefüllt ist

Question

Ich versuche eine Eingabe zu deaktivieren, während der Benutzer eine andere Eingabe ausfüllt. Ich habe es geschafft, einen der beiden Eingänge zu deaktivieren, während der andere Eingang gefüllt wird.

Das Problem ist, dass ich möchte, dass die deaktivierte Eingabe NUR deaktiviert wird, während der andere Eingang eingegeben wird. Also, wenn Der Benutzer ändert seine Meinung an der ersten Eingabe, er kann löschen, was in der aktuellen Eingabe ist, was die zweite Eingabe verfügbar macht und die erste deaktiviert.

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

Zuerst würde ich input verwenden, anstatt change. Dann müssen Sie disabled zurück auf false setzen, wenn die Eingabe leer ist. Ihre Überprüfung, ob es leer ist, ist redundant, Sie nur weder Seite von Ihrem ||, nicht beide. So

:

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

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

... und dann natürlich, wenn Sie es gegenseitigen sein wollen, das gleiche für input2.

Answer 2

EDIT: onkeydown wurde nicht auf die erste Presse onkeyup funktioniert nicht. Dies überprüft jedes Textfeld onkeyup Wenn man Text hat, wird es den anderen deaktivieren, aber wenn Benutzer den Text löscht, wird es den anderen wieder aktivieren.

function checkText() { 
 
    var inp1 = document.getElementById("input1"); 
 
    var inp2 = document.getElementById("input2"); 
 

 
    if (inp1.value !== "" || inp1.value.length > 0) { 
 
    document.getElementById("input2").disabled = true; 
 
    } else { 
 
    document.getElementById("input2").disabled = false; 
 
    } 
 
    if (inp2.value !== "" || inp2.value.length > 0) { 
 
    document.getElementById("input1").disabled = true; 
 
    } else { 
 
    document.getElementById("input1").disabled = false; 
 
    } 
 
}

<input type="text" onPaste="return false" onkeyup="checkText()" id="input1"> 
 
<input type="text" onPaste="return false" onkeyup="checkText()" id="input2">

Answer 3

Sie können diese mit Fokus und Unschärfe erreichen. Unten ist es mit JQuery gemacht.

$(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', ''); 
 
    }); 
 
});

<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">

Answer 4

Wie wäre es mit keyup?

Gefällt mir dies;

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 5

nicht es schwieriger machen Sie, als es ist, das ist einfach.

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);

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