Javascript----关于聚焦的小问题

最新推荐文章于 2024-06-05 14:57:08 发布

原创最新推荐文章于 2024-06-05 14:57:08 发布 · 457 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

文章讲述了如何调整JavaScript代码，将`input.focus()`从`click`事件中移出，以便用户无需点击就能直接在输入框中输入数字并实时显示，提高用户体验。

有一段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 + " ";
  }
});

结果展示：