我絕對不是 javascript 英雄，所以我有一個問題。
我在外部腳本中有以下代碼，當條件為真時，訊息會回顯到登錄螢屏（這作業正常）。作為測驗，我也希望禁用提交按鈕，但是如何實作呢？按鈕的 ID 是“btn_input”
if(txtboxval == "" || emailboxval == "")
{
document.getElementById("announcement").innerHTML="This is a text!";
return;
}
這可能嗎？
uj5u.com熱心網友回復：
//禁用按鈕
document.getElementById(BUTTON_ID).disabled = true;
//重新激活按鈕
document.getElementById(BUTTON_ID).removeAttribute('disabled');
uj5u.com熱心網友回復：
哇，這閃電般的速度，我會試試這個家伙的，非常感謝。
uj5u.com熱心網友回復：
如果你想強制禁用提交按鈕，你可以監聽表單的變化并評估checkValidity()方法的結果。
const formDataToObject = (formData) => {
const result = {};
for (const [key, value] of formData) {
Object.assign(result, { [key]: value });
}
return result;
};
const onSubmit = (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const data = formDataToObject(formData);
alert(JSON.stringify(data, null, 2));
};
const onFormInput = (e) => {
// When restting, the form validation passes before the clear happens
// Let's wait 0.1 seconds and then set disabled
setTimeout(() => {
const form = e.target.closest('form');
const submitButton = form.querySelector('button[type="submit"]');
if (form.checkValidity()) {
submitButton.removeAttribute('disabled');
} else {
submitButton.setAttribute('disabled', '');
}
}, 100);
};
document.forms.login
.addEventListener('input', onFormInput);
document.forms.login.querySelector('button[type="reset"]')
.addEventListener('click', onFormInput);html, body { width: 100%; height: 100%; margin: 0; }
body { display: flex; flex-direction: column; justify-content: center; align-items: center; }
form { display: grid; grid-template-columns: auto auto; grid-column-gap: 1rem; grid-row-gap: 0.5rem; }
form .actions { grid-column: 1 / 3; display: flex; justify-content: center; gap: 0.5rem; }<form name="login" onsubmit="onSubmit(event)">
<label for="username-id">Username</label>
<input type="text" id="username-id" name="username" required />
<label for="password-id">Password</label>
<input type="password" id="password-id" name="password" required />
<div class="actions">
<button type="reset">Reset</button>
<button type="submit" disabled>Submit</button>
</div>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/518086.html
上一篇：一鍵上手時下最火AI作畫工具
下一篇：將小部件或回呼傳遞給按鈕