web-dev-qa-db-ja.com

Javascriptを使用して入力フィールドを無効にする方法は？

私はJavascriptから始めています、私はこの関数を書きました：

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

最初のフィールドが入力されると、cantidadCopiasという名前の2番目のフィールドが無効になります。

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

ただし、最初のフィールドがいっぱいになったときに2番目のフィールドが無効になるわけではありません。

javascripthtmldisabled-input
16
JorgeeFG

コンソールを見ましたか？

  • Uncaught SyntaxError：予期しないトークン）
  • キャッチされないReferenceError：disableFieldが定義されていません

初めてスペルミスがあった場合、コードに余分な)

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

次の問題は、値の長さを見ないことです。

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

したがって、コードは次のようになります

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

しかし、今ではそれがどのように書かれているか、一度無効にすると、再び有効になることはありません。

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

onkeyup()の代わりにonkeydown()を使用するのが最適です。問題は、入力の値がキーダウンイベントで更新されないことです。

フィドル

<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  );
}
2
Bob

javascript：

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

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

入力長が再び0になったときにも再度有効にする必要があります。

それに加えて、onkeydownではなくonkeyupをフックする必要があります。

ここで試すことができます： jsfiddle.net/DBJfN/

1
GottZ