使用带有模糊的 setSelectionRange - Chrome 和 Safari 中的差异

Ali*_*gat 5 javascript safari google-chrome html-input reactjs

我正在尝试修复具有 onblur 事件侦听器的代码,该事件侦听器执行 setSelectionRange。我注意到,在 Chrome 上使用此功能时,模糊事件会将光标移动到下一个选项卡索引。然而,在 safari 上,光标保留在同一元素上,并且光标移动到 setSelectionRange 中指定的位置。

问题:

  1. 在执行模糊事件时我是否应该使用 setSelectionRange ?
  2. 有什么方法可以在两个浏览器上一致地使用 setSelectionRange 即我可以使 Safari 以与 Chrome 相同的方式工作吗?

下面是一段 hello world 代码,显示了当我在 Safari 和 Chrome 中按 Tab 键移出某个字段时,光标的行为有何不同:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script>
    function handleBlur() {
      event.target.setSelectionRange(1,1)
    };
  </script>
</head>
<body>
  <input value="First Name" onblur="handleBlur()">
  <input value="Last Name" onblur="handleBlur()">
</body>
</html>
Run Code Online (Sandbox Code Playgroud)