在blur（）上输入“倒带”

Question

我有一个data-sly-test.videoURL="${details.pagePath}#${gatherInsight.videoLandingPagePath}?vid=${details.videoID}" href="${videoURL @ context='uri'}" 和一个input。是否可以在text-overflow: ellipsis上显示文本的开头？现在，它停留在光标所在的文本结尾。

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

首先，我将焦点放在blur()上，然后输入 Ctrl + Home 的开头。然后，通过再次使其聚焦并按 Ctrl + End 并取消聚焦，来移至<input>的末尾。您可以看到仅当我的光标位于输入的开头时才出现省略号。

---

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

setSelectionRange

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

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

可以在需要时再次模糊，看看下面的代码并阅读注释以了解发生了什么

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