blur() 上的“倒带”输入

Question

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

考虑以下 GIF 试图演示该问题。

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

---

我可能刚刚破解了它。测试不同的浏览器。编辑。在 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;">

Answer 2

需要的时候再模糊一下就好了，看看下面的代码，读一下cmets看看是怎么回事

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