如何在输入 12 个字母的文本之前禁用按钮？

Question

我正在尝试弄清楚如何禁用按钮，直到将文本的 12 个字母输入到文本输入中。

我正在使用一个使用 Bootstrap 的程序，您可以添加自己的 JavaScript。

我下面的脚本是一个表单构建器，有两个功能，一个是禁用表单中的按钮，另一个是暂时切换到另一个页面：

<!--Formbuilder Form-->
<form action="quadsoft.info@yahoo.com" id="loginForm" name="Contact Us Form" method="POST" 
class="mbr-form form-with-styler">
<div class="row">
<div hidden="hidden" data-form-alert class="alert alert-success col-12">Thanks for filling out 
the form! We will be in touch with you soon.</div>
<div hidden="hidden" data-form-alert-danger class="alert alert-danger col-12"> </div>
</div>
<div class="dragArea row">
<div class="col-lg-12 col-md-12 col-sm-12 form-group">
<div class="form-row">
<div class="col">
<input type="text" id="fn" name="fn" placeholder="Enter Username" data-form-field="nameFirst" 
required="required" class="form-control text-multiple" value="new">
</div>
<div class="col">
<input type="text" id="ln" name="ln" placeholder="Enter Password" data-form-field="nameLast" 
required="required" class="form-control text-multiple" value="new">
</div>
</div>
</div>
<div class="col-md-6 input-group-btn btn" id="btnSubmit" mbr-buttons="true" mbr-theme- 
style="display-4" data-toolbar="-mbrBtnMove,-mbrLink,-mbrBtnRemove,-mbrBtnAdd"><a 
type="submit" class="btn btn-lg btn-primary" id="btnsubmit" data-app-placeholder="Type Text" 
onclick="func1()" disabled="stateHandle()">Send message</a></div>
<script>
    var btn = getElementById('btnSubmit');
    function stateHandle(){
        if(){ //?
            btn.disabled = true;
        }else if(){ //?
            btn.disabled = false;
        }
    }
    function func1(){
    window.setTimeout(function() {
window.location.href = 'index.html';
}, 3000);     
} 
</script>
</div>
</form><!--Formbuilder Form-->

Answer 1

首先，做document.getElementById

你可以这样做：

<input id='inputfeild'>
<button onclick = `event()`>

let input = document.getElementById(`inputfeild`)
function event() {
if(input.value.length > 11) {.../*do your function */}
}

if 语句确保如果文本框中没有 12 个或更多字符，该函数不执行任何操作。

Answer 2

您可以在该输入字段上添加 EventListener 并设置一个函数，该函数会在用户每次在该字段中输入内容时运行并检查。

document.getElementById('fn').addEventListener("input",stateHandle)
  
    function stateHandle(){   
      var btn = document.getElementById('btnsubmit');
      var inputField = document.getElementById('fn')
        if(inputField.value.length < 16){ //disable the button if length in less than 16
            btn.disabled = true;
        }else{ //enable it if it's 16 or more
            btn.disabled = false;
        }
    }
    function func1(){
    window.setTimeout(function() {
window.location.href = 'index.html';
}, 3000);     
}

<!--Formbuilder Form-->
<form action="quadsoft.info@yahoo.com" id="loginForm" name="Contact Us Form" method="POST" 
class="mbr-form form-with-styler">
<div class="row">
<div hidden="hidden" data-form-alert class="alert alert-success col-12">Thanks for filling out 
the form! We will be in touch with you soon.</div>
<div hidden="hidden" data-form-alert-danger class="alert alert-danger col-12"> </div>
</div>
<div class="dragArea row">
<div class="col-lg-12 col-md-12 col-sm-12 form-group">
<div class="form-row">
<div class="col">
<input type="text" id="fn" name="fn" placeholder="Enter Username" data-form-field="nameFirst" 
required="required" class="form-control text-multiple" value="new">
</div>
<div class="col">
<input type="text" id="ln" name="ln" placeholder="Enter Password" data-form-field="nameLast" 
required="required" class="form-control text-multiple" value="new">
</div>
</div>
</div>
<div class="col-md-6 input-group-btn btn" id="btnSubmit" mbr-buttons="true" mbr-theme- 
style="display-4" data-toolbar="-mbrBtnMove,-mbrLink,-mbrBtnRemove,-mbrBtnAdd"><button 
type="submit" class="btn btn-lg btn-primary" id="btnsubmit" data-app-placeholder="Type Text" 
disabled>Send message</button></div>

</div>
</form><!--Formbuilder Form-->