在不重新聚焦输入的情况下在 Safari 中将输入插入符号位置设置为模糊

Question

⏯ Playground Link（答案前）
⏯ Playground Link (after the answer )

<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); 是东西

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

现在，

Firefox 是唯一需要 setSelectionRange for 12359
Safari 是唯一 setSelectionRange 干扰模糊的浏览器（重点 loss/change）
setSelectionRange 将用户困在 Safari 中 #a，没有出路！
selectionStart > 0 我添加的帮助第二次尝试逃脱。

有没有人看到满足所有浏览器（包括 Safari 和 Firefox[=54] 的怪癖的最终修复=]?

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

Answer 1

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

在不重新聚焦输入的情况下在 Safari 中将输入插入符号位置设置为模糊

Set input caret position on blur in Safari without refocusing input

html

javascript

focus

caret

onblur