如何实现点击tel类型输入框自动选中已有数值？

我需要实现点击type="tel"的输入框时，自动选中其中已有的数值，尝试使用user-select: all属性但未生效，场景示例代码如下：

现有CSS代码 #

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input+span {
  padding-right: 30px;
}

input:invalid+span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
  color: #8b0000;
}

input:valid+span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
  color: #009000;
}

现有HTML代码 #

<form>
  <div>
    <label for="telNo">Enter a telephone number (required): </label>
    <input id="telNo" name="telNo" type="tel" required value="123456" />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

我没有直接修改HTML的权限，理想情况是仅通过CSS和JS解决问题。之前尝试的以下CSS代码未生效：

input[type="tel"] {
      -webkit-user-select: all;
      -ms-user-select: all;
      user-select: all;
}

解决方案 #

user-select: all在tel类型输入框上失效，是因为部分浏览器对这类特殊输入类型有默认交互逻辑，会覆盖CSS属性的效果。推荐使用JS来实现自动选中，兼容性更好：

实现代码 #

// 为所有tel类型输入框绑定点击和聚焦事件
document.querySelectorAll('input[type="tel"]').forEach(input => {
  // 点击事件触发选中
  input.addEventListener('click', function() {
    this.select();
  });
  
  // 聚焦事件触发选中（覆盖输入框已聚焦时的点击场景）
  input.addEventListener('focus', function() {
    // 延迟执行确保避开浏览器默认行为干扰
    setTimeout(() => {
      this.select();
    }, 0);
  });
});

说明 #

• 同时监听click和focus事件，覆盖所有可能触发输入框激活的场景；
• 使用setTimeout延迟执行选中操作，避免浏览器默认的光标定位行为干扰选中效果；
• 无需修改HTML，直接通过JS全局绑定即可生效。

内容的提问来源于stack exchange，提问作者Mikey Peebs