在HTML文本输入框中的问题怎么解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (55)

目前,允许用户向所有5个输入框输入信息。我正在创建这样的内容:用户只能回答表单中的3个问题,当他回答自己选择的3个问题时,表单中的其他输入文本字段(框)将被禁用。

<html>    
<h1>Security Questions</h1>
<body>
<p>
Only Enter Answer 3 Security Questions.
</p>
<form action="/submitAnswer.php" method="POST">

<label>What City Was Your Mom Born In?</label><br>
<input type="text" id="secQuestion01" name="secQuestion01"><br>

<label>What Is Your Dream Car?</label><br>
<input type="text" id="secQuestion02" name="secQuestion02"><br>

<label>What Is Your Mother's Maidan Name?</label><br>
<input type="text" name="secQuestion03"><br>

<label>What's Your Dream Job?</label><br>
<input type="text" name="secQuestion04"><br>

<label>Name Your First Grade Teacher?</label><br>
<input type="text" name="secQuestion05"><label><br>

<label>Name Your First Pet?</label><br>
<input type="text" name="secQuestion01"><label><br>
</form>
</body>
</html>
提问于
用户回答回答于

你可以附加一个keypress 如果变量等于3,则禁用所有其他变量.如果你想让用户删除他们对一个问题的回答并回答另一个问题,你需要为每个输入添加一个keydown事件监听器,如果事件的keyCode是8(退格)并且当前输入的值的长度是 1,然后启用所有其他输入。

<html>  
<body>
<h1>Security Questions</h1>
<p>
Only Enter Answer 3 Security Questions.
</p>
<form action="/submitAnswer.php" method="POST" id="questionForm">

<label>What City Was Your Mom Born In?</label><br>
<input type="text" id="secQuestion01" name="secQuestion01"><br>

<label>What Is Your Dream Car?</label><br>
<input type="text" id="secQuestion02" name="secQuestion02"><br>

<label>What Is Your Mother's Maidan Name?</label><br>
<input type="text" name="secQuestion03"><br>

<label>What's Your Dream Job?</label><br>
<input type="text" name="secQuestion04"><br>

<label>Name Your First Grade Teacher?</label><br>
<input type="text" name="secQuestion05"><label><br>

<label>Name Your First Pet?</label><br>
<input type="text" name="secQuestion01"><label><br>
</form>
<script>
var inputs = document.querySelectorAll('#questionForm input');
var entered = [];
var numOfEntered = 0;
for(let i = 0; i < inputs.length; i++){
  entered[i] = false;
  inputs[i].addEventListener("keypress", function(e){
      if(!entered[i]){
        entered[i] = true;
        numOfEntered++;
        if(numOfEntered==3){
          for(let j = 0; j < entered.length; j++){
            if(!entered[j]){
              inputs[j].disabled = true;
            }
          }
        }
      }
  });
  inputs[i].addEventListener("keydown", function(e){
    if(e.keyCode==8&&!this.value.length-1){
      entered[i] = false; 
      numOfEntered--;
      for(let z = 0; z < entered.length; z++){
        inputs[z].disabled = false;
      }
    }
  });
}
</script>
</body>
</html>

扫码关注云+社区

领取腾讯云代金券