考慮如下的最小形式：
let button = document.querySelector("button");
let firstNameInput = document.querySelector("#firstName");
firstNameInput.style.borderColor = "red";
button.addEventListener('click', () => {
firstNameInput.value = "Goofy";
});
firstNameInput.addEventListener('input', () => {
firstNameInput.style.borderColor = "black";
}).form__input {
border: none;
outline: none;
border-bottom: 1px solid black;
}<form>
<label for="firstName">Firstname:</label>
<input type="text" class="form__input" id="firstName">
<button type="button">Button</button>
</form>加載此頁面時，您應該會看到一個帶有紅色下邊框的輸入欄位，旁邊是一個按鈕。如果單擊按鈕，名稱“Goofy”將寫入輸入欄位。但是，底部邊框保持紅色。我希望它在輸入欄位中寫入內容時改變顏色。現在，當我繼續手動更改名稱時，邊框顏色將其顏色更改為黑色，就像我想要的那樣。但是誰能向我解釋為什么單擊按鈕時邊框顏色沒有改變？
uj5u.com熱心網友回復：
輸入事件是一個UI-Event，它意味著在用戶對頁面執行操作時觸發，而不是在腳本執行時觸發。
對于您的情況，您的腳本可以在設定.value.
let button = document.querySelector("button");
let firstNameInput = document.querySelector("#firstName");
const setBorderColor = () => {
firstNameInput.style.borderColor = "black";
};
firstNameInput.style.borderColor = "red";
button.addEventListener('click', () => {
firstNameInput.value = "Goofy";
setBorderColor();
});
firstNameInput.addEventListener('input', setBorderColor).form__input {
border: none;
outline: none;
border-bottom: 1px solid black;
}<form>
<label for="firstName">Firstname:</label>
<input type="text" class="form__input" id="firstName">
<button type="button">Button</button>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399982.html
標籤：javascript html css 事件监听器
上一篇：從HTML中的元素中洗掉特定類