失去焦点时“倒带”输入

Question

我有一个设置了“text-overflow: ellipsis”的。是否可能在时显示文本开头？现在它停留在光标所在的文字末尾。 考虑下面的GIF演示问题。 首先，我聚焦于并通过Ctrl+Home回到输入框的开头。然后再次聚焦于，按下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;">

- SeaBass

---

能否在失去焦点时显示字符串的开头？ - NullPointer

你能简单解释一下你的问题吗？ - NullPointer

@SeaBass 我已经在你的问题中添加了一个GIF，以尝试有效地展示这个问题。一开始从你的描述中真的很难理解。如果你认为这张图片不正确或者不想在你的问题中使用它，请随意将其编辑删除。 - zero298

@SeaBass Quicktime 和 ffmpeg。 - zero298

如果你破解了它，那么你可以将其发布为答案，或者如果你不想发布它，可以删除该问题。 - Huangism

Answer 1

这段代码可以执行，但在Safari中会创建一个循环，因为它会再次设置焦点...有没有一种方式可以首先设置selectionrange，然后再失去焦点？

$("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;">

- SeaBass

---

有任何想法吗？谢谢！ - SeaBass

请告诉我有没有任何人有在Safari中解决此问题的想法？ - SeaBass

先模糊处理，然后设置范围再次模糊处理是可以的。你只需要定义一个变量作为标志，这样一旦设置了范围，就手动触发模糊处理。在第二轮手动触发的模糊处理中，你可以检查标志以确定是否需要重新设置范围。如果范围已经设置，则重置标志并不做任何操作。 - Huangism

Answer 2

如果需要的话，再次模糊也没关系。看一下下面的代码并阅读注释以了解正在发生什么。

// set true initially
var setRange = true;

$("input").on('blur', function(e) {
  var $this = $(this);
  
  // set range then trigger blur again, change setRange flag
  if (setRange) {
    $this.get(0).setSelectionRange(0, 0);
    setRange = false;
    $this.trigger("blur");
  } else {
    // range was set before, reset the flag so it will work next time
    setRange = true;
  }
});

<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;">

- Huangism

---

谢谢！这给了我一个错误 "message": "too much recursion",。 - SeaBass

还有这个："message": "脚本错误。"。然而，我在Safari中尝试了没有整个on blur部分的情况，似乎现在已经可以正常工作了，所以他们可能在最新版本的Safari中修复了它。问题解决了，至少对于新的浏览器用户来说是这样。 - SeaBass

已更新答案，应该在模糊触发器之前设置标志。现在应该按预期工作了。 - Huangism