Question

以下在使用FireFox时工作正常，但在使用Chrome时，第一个更改事件有效，但是当点击它时，除非光标离开该输入区域，否则事件不会触发。不知道怎么解决这个问题？非常感谢！

// html
<label for="fontSize">Font Size</label>
<input type="number" name="fontSize" min=10 max=100 step=5>

<div id="myDiv">text</div>

// Javascript
document.querySelector('input').addEventListener('change', myFunc); 

function myFunc(){
    document.querySelector('#myDiv').style.fontSize = this.value + 'px';
}

Answer 1

change inputs事件的运作方式。当焦点丢失时触发。如果您想触发按任意键，可以使用keyup事件或更好的input事件。

＆＃13;

document.querySelector('input').addEventListener('input', myFunc); 

function myFunc(){
    document.querySelector('#myDiv').style.fontSize = this.value + 'px';
}

＆＃13;

<label for="fontSize">Font Size</label>
<input type="number" name="fontSize" min=10 max=100 step=5>

<div id="myDiv">text</div>

＆＃13;

除非光标离开该区域（Chrome）

1 个答案: