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

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

结果展示：

此时在键盘上直接输入数字，可以看到输入框有相应的内容显示出来，这就达到了聚焦的目的，不用再点击输入框了。