首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在使用了一定数量的文本框后,如何禁用未使用的文本框上的输入?

在使用了一定数量的文本框后,如何禁用未使用的文本框上的输入?
EN

Stack Overflow用户
提问于 2018-08-15 08:33:11
回答 2查看 46关注 0票数 -2

允许用户在5个输入框中输入信息。

我希望用户只被允许回答表单中的3个问题,当他回答他选择的3个问题时,表单中其余的输入文本字段(框)将被禁用。

代码语言:javascript
复制
<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>
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-08-15 09:01:15

您可以将keypress事件侦听器附加到每个input,并在其他input中添加新输入时递增全局变量。如果该变量等于3,请禁用所有其他input。如果要允许用户删除他们对一个问题的答案而回答另一个问题,则需要为每个输入添加一个keydown事件侦听器,如果事件的keyCode为8(退格)且当前输入值的长度为1,则启用所有其他input

代码语言:javascript
复制
<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>

票数 1
EN

Stack Overflow用户

发布于 2018-08-15 09:34:58

以下操作将完成您所需的操作:

代码语言:javascript
复制
$(function () {

  $('input').on('focusout', function () {
    
    var $inputs = $('input');
    
    var numAnswered = $inputs.filter(function () {
      return $(this).val() !== '';
    }).length;
    
    $.each($inputs, function () {
      if (numAnswered < 3) {
        $(this).prop('disabled', false);
      } else {
        if (!$(this).val()) {
          $(this).prop('disabled', true);
        }
      }
    });
    
    
  });

});
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>    
<body>
<h1>Security Questions</h1>
<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>

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51851420

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档