javascript - 在 Safari 中将输入插入符号位置设置为模糊而不重新聚焦输入

Question

⏯游乐场链接（答案前）
⏯游乐场链接（答案后https://stackoverflow.com/a/67071637/112882）

<style>input[type=text] { width: 3em; text-overflow: ellipsis; }</style>
<input id=a type=text value=123456789><br>
<input id=b type=text value=123456789>

<script>
  a.addEventListener('blur', function(event) {
    if (event.target.selectionStart > 0)
      event.target.setSelectionRange(0, 0);
  });
</script>

event.target.setSelectionRange(0, 0);是东西

• 添加到Firefox的PDF.js
  • 解决这个问题：https
    ://github.com/mozilla/pdf.js/issues/12359 移动文本光标以开始模糊（在所有其他浏览器中都没有 JS 代码）
  • 由于一个 8 年前的错误https://bugzilla.mozilla.org/show_bug.cgi?id=860329

现在，

1. Firefox是唯一需要setSelectionRange12359的浏览器
2. Safari是唯一一个setSelectionRange干扰模糊（焦点丢失/更改）的浏览器，
   setSelectionRange使用户无法摆脱Safari ！我添加的内容有助于第二次尝试逃脱。#a
selectionStart > 0

有没有人看到满足所有浏览器（包括Safari和Firefox ）怪癖的终极修复？

---

跟进Safari：https ://bugs.webkit.org/show_bug.cgi?id=224425

标签： javascripthtmlfocuscaretonblur

Answer 1

无需 setSelectionRange() 来更新滚动位置。input.scrollLeft = 0;在 Safari 中没有副作用的情况下会产生相同的效果。