Question

我在js文件中有这样的脚本我从jsp调用，我需要添加监听器而不是“onload”。对我来说重要的是： 1）它必须是没有jQuery或任何东西的纯js 2）动态创建输入标签（也许这很重要） 3）它必须是外部js文件（<script src="<c:url value="/js/focus.js" />"></script>），而不是jsp页面内的标记<script>function.....</script>

    onload = function () {
        var allInput = document.getElementsByTagName("input");
        for (i = 0; i < allInput.length; i++) {
        allInput[i].onfocus = showHint
    }
};

function showHint() {
    var hint = document.getElementById("hint");
    hint.innerHTML = this.name + " " + this.value;
    hint.style.display = "block";
};

Answer 1

页面可以在加载之前获得焦点。如果页面未加载，则您的输入不存在，因此window.onfocus无法设置allInput[i].onfocus。当页面刷新并关注devtools时，页面有机会在window.onfocus调用之前创建输入。

将window.onfocus放在window.onload内，以便在加载页面后始终调用它。如果您不想覆盖window.onload，请改为使用addEventListener：

addEventListener('load', function () {
  addEventListener('focus', function() {
    var allInput = document.getElementsByTagName("input")
    for (i = 0; i < allInput.length; i++) {
      allInput[i].addEventListener('focus', showHint)
    }
  }
})

function showHint() {
  var hint = document.getElementById("hint")
  hint.innerHTML = this.name + " " + this.value
  hint.style.display = "block"
}

Answer 2

将onload替换为onfocus

onfocus = function () {
        var allInput = document.getElementsByTagName("input");
        for (i = 0; i < allInput.length; i++) {
        allInput[i].onfocus = showHint
    }
};

Answer 3

这对我有用

window.addEventListener('load', function () {
    var allInput = document.getElementsByTagName("input");
    for (i = 0; i < allInput.length; i++) {
        allInput[i].onfocus = showHint
    }
});

function showHint() {
    var hint = document.getElementById("hint");
    hint.innerHTML = this.name + " " + this.value;
    hint.style.display = "block";
};

添加onfocus侦听器而不是onload

3 个答案: