时间戳

首页 > 解决方案 > 有没有办法仅使用 Javascript、HTML、CSS（无 Jquery）在内部资源管理器上执行 onChange()

javascript - 有没有办法仅使用 Javascript、HTML、CSS（无 Jquery）在内部资源管理器上执行 onChange()

问题描述

有没有办法仅使用 Javascript、HTML、CSS（无 Jquery）在内部资源管理器上执行 onChange()。我的代码在 onChange() 时将输入发送到我的函数。当我使用 chrome 时，它​​工作得很好。但我只是注意到 onChange() 不像在 chrome 上那样在 IE 上工作。有没有办法让它像在 chrome 上一样工作或者在我选择一个选项后我可以做些什么来调用该函数？如果不是，我必须更改我的脚本代码的所有 400 行:(

<label>Choose a browser from this list:
        <input id = "input1" list="table1" name="myBrowser" 
        style="width: 500px;"  onchange="castvote('input1','table1')" onclick="test('input1')"/> 
</label>
    <datalist id="table1">
        <option value="Firefox">      
        <option value="more options">

标签： javascripthtmlcss

解决方案

下面是一个非常简单的通过 vanilla js 添加监听器的例子。现在它已更新为查找诸如 castVote 之类的类，并在循环中将侦听器添加到每个元素

(function addCastVoteListeners() {
  const els = Array.prototype.slice.call(document.querySelectorAll('.castVote'));
  els.forEach(addCastVoteListener);
})();
function addCastVoteListener(el) {
  el.addEventListener('change', castVote);
}
function castVote() {
  console.log('cast vote');
}
<label>Choose a browser from this list:
        <input id = "input1" list="table1" name="myBrowser" class="castVote"
        style="width: 500px;"/> 
</label>
<datalist id="table1">
    <option value="Firefox">      
    <option value="more options">
</datalist>

推荐阅读