Question

我希望在任何文本字段聚焦时执行一个函数。

像这样的东西，但纯粹是在Javascript中 - 不是在JQUERY

$("input").focus(function() {
    alert("Hello World");
});

我在尝试：

document.getElementById("text1").onfocus = alert(1);

但这只会在加载页面后显示警告，没有别的。

由于

Answer 1

按标签名称获取元素＆amp;循环（＆＃34;迭代＆＃34;）在它们上附加焦点。

http://www.w3schools.com/jsref/met_doc_getelementsbytagname.asp

var x=document.getElementsByTagName("input");

编辑：将此内容放在页面末尾

<script>
  var x=document.getElementsByTagName("input");
for(i=0;i<x.length;i++)
{
x[i].addEventListener('focus',function(){
       alert("focus");
    });
}

</script>

Answer 2

另一种使用document.querySelectorAll新浏览器的方法

    <div class="sliding-marquee">
        <ul>
            <li>TEXT 1</li>
            <li>LONGER TEXT 2</li>
            <li>EVEN LONGER TEXT 3</li>
        </ul>
    </div>

然后在循环中例如使用addEventListener

var inputs = document.querySelectorAll('input');

Answer 3

如果您喜欢jQuery的某些方面，但又不想在项目中包含整个库，则可以查看You Might Not Need jQuery。您可以在页面顶部的设置中设置您支持的最低IE版本。

function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function(){
      handler.call(el);
    });
  }
}

function addEventListeners(selector, type, handler) {
  var elements = document.querySelectorAll(selector);
  for (var i = 0; i < elements.length; i++) {
    addEventListener(elements[i], type, handler);
  }
}

addEventListeners('input', 'focus', function(e) {
  if (this.value !== this.placeholder) {
    this.value = this.placeholder;
  } else {
    this.value = '';
  }
});

input {
  display: block;
}

<input type="text" placeholder="One" />
<input type="text" placeholder="Two" />
<input type="text" placeholder="Three" />

Answer 4

我知道我可能迟到了，但是我只想加2美分，因为我看到很多类似的Stackoverflow答案仍在使用JQuery，并且许多人已经从JQuery转移了，可能还需要其他选择< / p>

您既可以使用focusin事件，也可以在JQuery或JS中自上而下捕获阶段中捕获焦点，如果它在JS中可用，则在其他方面也可以使用，因为我不使用JQ

let form = document.forms.myForm;
form.addEventListener('focus', (event) => {
    console.log('Focused!');
    console.log(event.target);
}, true);

//Work around focusin
form.addEventListener('focusin', (event) => {
    console.log('Focused In!');
    console.log(event.target);
});

Javascript在焦点上的所有输入字段上运行函数

4 个答案: