如何使用 Javascript 禁用输入字段？

Posted 2023-02-22

【中文标题】如何使用 Javascript 禁用输入字段？

【英文标题】：How to disable an input field using Javascript?

【发布时间】：2012-10-05 11:46:08

【问题描述】：

我从 javascript 开始，我写了这个函数：

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

如果第一个字段已填满，则会禁用名为 cantidadCopias 的第二个字段。

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

但是当第一个字段被填充时，它不会禁用第二个字段。

【问题讨论】：

有人拼写有问题 document.getElementById("valorFinal").lenght

您忘记告诉我们您的问题出在哪里。我们的问题是什么？

对不起，我已经编辑了问题。

你应该挂钩 onkeyup 而不是 onkeydown。此外，当第一个输入的长度再次达到 0 时，您应该再次启用第二个输入。以我的回答为例。

【参考方案1】：

你看控制台了吗？

Uncaught SyntaxError: Unexpected token ) 未捕获的 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;
​

【讨论】：

我喜欢你复制最后一部分的方式。 /讽刺

@Jan-StefanJanetzky 我没有复制你的任何东西。认为我做到了，恭维自己。

【参考方案2】：

最好使用onkeyup() 而不是onkeydown()。问题是输入的值没有在 keydown 事件上更新。

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

【讨论】：

console.log 在没有附加调试器的浏览器中不可用。 （例如，没有打开开发控制台的 Firefox 或 IE）除此之外，您的整个答案已经发布。

注释掉了console.log()，它可能比其他的更干净。:)

@Bob 你不需要三元运算，因为val.length > 0 本身就是一个布尔值。

【参考方案3】：

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时，您也应该再次启用它。

此外，您应该挂钩 onkeyup 而不是 onkeydown。

你可以在这里试试：jsfiddle.net/DBJfN/

【讨论】：

谢谢，onkeyup 解决了我在再次按下 Del 键（当它为空时）之前无法启用字段的问题。

没问题。 onblur 也可能对您感兴趣，以防有人在按住键时单击某处（在 onkeyup 被解雇之前）