2016-06-11 5 views
1

Ich habe den folgenden Code, der, wenn Text in einem Feld eingegeben wird, das zweite Feld automatisch deaktiviert wird. Wenn der Text in der aktiven Box gelöscht wird (z. B. weil der Benutzer falsche Daten eingibt), wird das zweite Textfeld nicht automatisch aktiviert, sondern es muss eine Seitenaktualisierung erneut aktiviert werden.Aktivieren Sie das HTML-Textformular, wenn zusätzlicher Textformularfeldtext gelöscht wird

Gibt es eine Möglichkeit, das Textfeld "made inactive" aktiv zu machen, wenn der Inhalt des "aktiven" Textes bx gelöscht wird?

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8" /> 
 
</head> 
 

 
<body> 
 
First name: <input type="text" name="fname" id="fname"><br> 
 
Last name: <input type="text" name="lname" id="lname"><br> 
 
<script type="text/javascript"> 
 
var first = document.getElementById("fname"); 
 
var last = document.getElementById("lname"); 
 
first.addEventListener("blur", function(){ 
 
\t last.disabled = true; 
 
}); 
 
last.addEventListener("blur", function(){ 
 
\t first.disabled = true; 
 
}); 
 
</script> 
 
</body> 
 
</html>

+0

Während dies einfach genug ist, ich bin gespannt, zu erreichen, wie zu * warum * Sie tun dies; eine Person kann einen Nachnamen * oder * einen Vornamen haben, aber nicht beides? Oder missverstehe ich wirklich deine Benutzeroberfläche? –

+0

Vor- und Nachname werden nicht die Auswahl sein, sie werden "Each" und "Total" sein, was sich auf die Kosten bezieht, da das Projekt es den Benutzern erlaubt, die Kosten für eine Veranstaltung im Ausland basierend auf der Gesamtzahl der Personen zu berechnen gehen und ob sie die jeweiligen Kosten oder Gesamtkosten kennen, um die individuellen Kosten insgesamt zu berechnen. Es war einfacher, Namen für das Beispiel zu verwenden. – user2327626

Antwort

1

zu tun, was Sie fragen, sie vier Bedingungen abdecken müssen:

(1) Wenn der Fokus auf einem der Felder, Deaktivieren das andere Feld

(2), wenn alle Daten im aktiven Bereich löschen, ermöglichen, das andere Feld

(3) Wenn neue Daten in der aktiven Bereich hinzufügen, , das andere Feld

(4) Wenn Unschärfe aktiver Bereich, anderes Feld wieder aktivieren IF verschwommenes Feld

Dieser leeren deaktivieren sollte die vier decken. Beachten Sie, dass in diesem Beispiel jQuery verwendet wird, sodass die jQuery-Bibliothek (wie im folgenden Democode) enthalten sein sollte. Außerdem sollte der jQuery-Code in einem document ready function sein.

$(document).ready(function(){ 
 

 
    $('input').focus(function(){ 
 
    $('input').not(this).prop('disabled',true); 
 
    }); 
 

 
    $('input').keyup(function(){ 
 
    var txt = $(this).val(); 
 
    if (txt.length < 1) $('input').prop('disabled', false); 
 
    else $('input').not(this).prop('disabled',true); 
 
    }); 
 

 
    $('input').blur(function(){ 
 
    var txt = $(this).val(); 
 
    if (txt.length < 1) $('input').prop('disabled', false); 
 
    }); 
 

 
}); //END document.ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
First name: <input type="text" name="fname" id="fname"><br> 
 
Last name: <input type="text" name="lname" id="lname"><br>

2

Sie input event verwenden können, um Ihr Ziel zu erreichen:

window.onload = function() { 
 
    var first = document.getElementById("fname"); 
 
    var last = document.getElementById("lname"); 
 
    first.addEventListener("input", function(e){ 
 
    last.disabled = this.value.trim().length != 0; 
 
    }); 
 
    last.addEventListener("input", function(e){ 
 
    first.disabled = this.value.trim().length != 0; 
 
    }); 
 
}
First name: <input type="text" name="fname" id="fname"><br> 
 
Last name: <input type="text" name="lname" id="lname"><br>