模糊()上的"倒带"输入

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

当你需要的时候再模糊一下就可以了，看看下面的代码并阅读注释来看看发生了什么

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