我想弄清楚如何禁用按鈕，直到文本的 12 個字母輸入到文本輸入中。
我正在使用一個使用 Bootstrap 的程式，您可以添加自己的 JavaScript。
我下面的腳本用于表單構建器以及兩個功能，一個功能用于禁用表單中的按鈕，另一個功能是暫時切換到另一個頁面：
<!--Formbuilder Form-->
<form action="[email protected]" id="loginForm" name="Contact Us Form" method="POST"
>
<div >
<div hidden="hidden" data-form-alert >Thanks for filling out
the form! We will be in touch with you soon.</div>
<div hidden="hidden" data-form-alert-danger > </div>
</div>
<div >
<div >
<div >
<div >
<input type="text" id="fn" name="fn" placeholder="Enter Username" data-form-field="nameFirst"
required="required" value="new">
</div>
<div >
<input type="text" id="ln" name="ln" placeholder="Enter Password" data-form-field="nameLast"
required="required" value="new">
</div>
</div>
</div>
<div id="btnSubmit" mbr-buttons="true" mbr-theme-
style="display-4" data-toolbar="-mbrBtnMove,-mbrLink,-mbrBtnRemove,-mbrBtnAdd"><a
type="submit" 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-->
uj5u.com熱心網友回復：
您可以在該輸入欄位上添加一個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="[email protected]" 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-->uj5u.com熱心網友回復：
首先，做 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 個或更多字符時不執行任何操作。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/388661.html
標籤：javascript 形式 按钮 bootstrap-4 禁用