有一段js代码如下 :
var para = document.querySelector("p");
var input = document.querySelector("input");
var btn = document.querySelector("button");
btn.addEventListener("click", function () {
para.textContent = "输出: ";
var num = input.value;
input.value = "";
input.focus();
for (var i = 1; i <= num; i++) {
var sqRoot = Math.sqrt(i);
if (Math.floor(sqRoot) !== sqRoot) {
continue;
}
para.textContent += i + " ";
}
});
发现页面展示为:
发现需要 点击输入框才可以进行输入
此时的问题是:input.focus()放在了click事件里面,点击(click)事件执行也会自动生成聚焦,如果想打开页面不用点击输入框,直接键盘输入数字在输入框显示的话,此时需要把input.focus();放到click事件外面执行,代码如下:
var para = document.querySelector("p");
var input = document.querySelector("input");
var btn = document.querySelector("button");
input.focus();
btn.addEventListener("click", function () {
para.textContent = "输出: ";
var num = input.value;
input.value = "";
for (var i = 1; i <= num; i++) {
var sqRoot = Math.sqrt(i);
if (Math.floor(sqRoot) !== sqRoot) {
continue;
}
para.textContent += i + " ";
}
});
结果展示:
此时在键盘上直接输入数字,可以看到输入框有相应的内容显示出来,这就达到了聚焦的目的,不用再点击输入框了。