Javascript/HTML Oninput with div

Question

我用一个类为div制作了oninput。我无法给div添加ID。下面是我的脚本:

var objecto = document.getElementsByClassName(" nicEdit-main ")[0];
objecto.oninput = function() {
    alert("Ok!");
}  

这是我的HTML:

<div class=" nicEdit-main   " style="width: 499px; margin: 4px; min-height: 149px; overflow: hidden;" contenteditable="true">1123215545<br></div>

为什么oninput不为这个div工作?

Answer 1

它应该正常工作，确保您的脚本在目标元素加载到dom后执行。

一个方法是使用dom ready/window load事件处理程序

window.addEventListener('load', function() {
  var objecto = document.getElementsByClassName(" nicEdit-main ")[0];
  objecto.oninput = function() {
    alert("Ok!");
  }
})

<div class=" nicEdit-main   " style="width: 499px; margin: 4px; min-height: 149px; overflow: hidden;" contenteditable="true">1123215545
  <br>
</div>

---

另一种是将脚本放在元素之后，如

<div class=" nicEdit-main   " style="width: 499px; margin: 4px; min-height: 149px; overflow: hidden;" contenteditable="true">1123215545
  <br>
</div>
<script>
  var objecto = document.getElementsByClassName(" nicEdit-main ")[0];
  objecto.oninput = function() {
    alert("Ok!");
  }
</script>