javascript - "Rewind"模糊输入()

Question

我有一个 input与 text-overflow: ellipsis .是否可以在 blur() 上显示文本的开头？ ？现在它停留在光标所在的文本末尾。

考虑下面的 GIF 试图演示这个问题。

首先，我关注 <input>并转到输入 Ctrl + Home 的开头。然后我转到 <input> 的末尾通过再次聚焦并按 Ctrl + End 并取消聚焦。您可以看到只有当我的光标位于输入的开头时才会出现省略号。

---

我可能刚刚破解了它。测试不同的浏览器。编辑。在 Safari 中无法正常工作。 setSelectionRange将焦点设置回模糊输入。想法？

$("input").on('blur', function(e) {
  $(this).get(0).setSelectionRange(0,0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="A bunch of text text text text text text text text text" style="width: 100px; text-overflow: ellipsis;">

Answer 1

有效，但在 Safari 中创建了一个循环，它再次设置焦点...有什么方法可以先设置选择范围然后再模糊吗？

$("input").on('blur', function(e) {
  $(this).get(0).setSelectionRange(0,0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="A bunch of text text text text text text text text text" style="width: 100px; text-overflow: ellipsis;">