在使用了一定数量的文本框后，如何禁用未使用的文本框上的输入？
在使用了一定数量的文本框后，如何禁用未使用的文本框上的输入？
提问于 2018-08-15 08:33:11
允许用户在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>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-15 09:01:15
您可以将keypress事件侦听器附加到每个input，并在其他input中添加新输入时递增全局变量。如果该变量等于3，请禁用所有其他input。如果要允许用户删除他们对一个问题的答案而回答另一个问题，则需要为每个输入添加一个keydown事件侦听器，如果事件的keyCode为8(退格)且当前输入值的长度为1，则启用所有其他input。
<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>
Stack Overflow用户
发布于 2018-08-15 09:34:58
以下操作将完成您所需的操作：
$(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);
}
}
});
});
});<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51851420
复制相关文章
相似问题
腾讯云开发者
