Question

很抱歉，如果已经询问过，但我发现的所有结果都使用了jQuery。

我有以下代码：

<script>
    var nameBox = document.getElementById('name');

    if(nameBox == document.activeElement) {
        console.log('name element focused')
    }
</script>

但是，当我点击输入时，没有任何内容记录到控制台。我究竟做错了什么？（我想在没有jQuery的情况下这样做）

Answer 1

在您的情况下，您正在检测脚本运行期间元素是否处于活动状态，因此您将获得错误。在它之后你没有任何探测器。因此，您需要使用addEventListener()函数并为focus事件添加处理程序。元素聚焦时会触发。

document.getElementById('inp').addEventListener('focus', function(){
  console.log('Focused');
});

<input id="inp" />

Answer 2

您正在测试元素是否专注于现在，而是设置一个事件监听器来执行时获得焦点。

function your_function(event) {
    console.log('name element focused')
}

nameBox.addEventListener("focus", your_function);

Answer 3

有一些方法可以做到这一点：

1. onFocus：

＆＃13;

function focused(element) {
  element.style.background = "gold";
}

＆＃13;

<input type="text" onfocus="focused(this)">
<input type="text" onfocus="focused(this)">

＆＃13;

2。的addEventListener

＆＃13;

inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('focus', function(element){
        document.activeElement.style.background="gold"
    });
}

＆＃13;

<input type="text"/>
<input type="text"/>

＆＃13;

3。 Jquery焦点：

＆＃13;

$(function(){
$( "input" ).focus(function(e) {
  $(this).css( "background", "gold" );
});

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text"/>
<input type="text"/>

＆＃13;

检测输入何时聚焦

3 个答案:

1. onFocus：

2。的addEventListener

3。 Jquery焦点：