Wie deaktiviere ich ein Eingabefeld mit Javascript?

Question

ich mit Javascript fange, schrieb ich diese Funktion:

function disableField() { 
    if(document.getElementById("valorFinal").length > 0)) { 
    document.getElementById("cantidadCopias").disabled = true; 
    } 
} 

, die das zweite Feld mit dem Namen cantidadCopias wenn der erste deaktiviert gefüllt ist.

<label> <span>Valor final:</span> 
    <input type="text" class="input_text" name="valorFinal" id="valorFinal" onkeydown="disableField()"/> 
</label> 
<label> <span>Cantidad de Copias:</span> 
    <input type="text" class="input_text" name="cantidadCopias" id="cantidadCopias"/> 
</label> 

Aber es deaktiviert nicht das zweite Feld, wenn das erste gefüllt ist.

Answer 1

Haben Sie sich die Konsole angesehen?

• Uncaught Syntaxerror: unerwartete Token)
• Uncaught Reference: disableField nicht

ersten Mal ein, Rechtschreibfehler hatte jetzt hat der Code definiert eine zusätzliche )

function disableField() { 
    if(document.getElementById("valorFinal").length > 0)) { <-- extra) 
    document.getElementById("cantidadCopias").disabled = true; 
    } 
}​ 

Das nächste Problem ist, dass Sie nicht die Länge des Wertes betrachten.

if(document.getElementById("valorFinal").length > 0) <-- you are looking at the length of the HTML DOM Node. 

So sollte der Code aussehen

function disableField() { 
    if(document.getElementById("valorFinal").value.length > 0) { 
    document.getElementById("cantidadCopias").disabled = true; 
    } 
}​ 

aber jetzt, wie es geschrieben steht, wenn es deaktiviert ist, wird es nicht wieder aktiviert werden.

function disableField() { 
    var isDisabled = document.getElementById("valorFinal").value.length > 0; 
    document.getElementById("cantidadCopias").disabled = isDisabled; 
}​ 

Answer 2

die javascript:

var disableField = function() { 
    var state = document.getElementById("valorFinal").value.length > 0; 
    document.getElementById("cantidadCopias").disabled = state; 
}​;​ 

die html:

<label> <span>Valor final:</span> 
    <input type="text" class="input_text" name="valorFinal" id="valorFinal" onkeyup="disableField()"/> 
</label> 
<label> <span>Cantidad de Copias:</span> 
    <input type="text" class="input_text" name="cantidadCopias" id="cantidadCopias"/> 
</label>​ 

Sie sollten es auch wieder aktivieren, wenn die Eingabelänge 0 wieder an ist.

Außerdem sollten Sie onkeyup und nicht onkeydown haken.

können Sie es hier versuchen: jsfiddle.net/DBJfN/

Answer 3

Am besten ist es, wenn Sie onkeyup() statt onkeydown() verwenden. Das Problem ist, dass der Wert der Eingabe beim Keydown-Ereignis nicht aktualisiert wird.

Fiddle

<label> 
    <span>Valor final:</span> 
    <input type="text" class="input_text" name="valorFinal" id="valorFinal" onkeyup="disableField(this.value)"/> 
</label> 
<label> 
    <span>Cantidad de Copias:</span> 
    <input type="text" class="input_text" name="cantidadCopias" id="cantidadCopias"/> 
</label> 

Javascript

function disableField(val) { 
    var cantidadCopias = document.getElementById("cantidadCopias"); 
    cantidadCopias.disabled = (val.length > 0 )? true:false; 
}