在输入之间切换时如何防止突出显示所有文本？

Question

我有许多需要重复填写的输入字段，因此我通常使用 Tab 来浏览表单。

字段具有需要添加的默认后缀值。当我通过鼠标点击输入时，它按预期工作。

但是，当我在输入之间切换时，它会选择所有文本，这在我的情况下是不受欢迎的行为。

看看这个：

function setCaretPosition(elem, caretPos) {
  if (elem == null) return;
  if (elem.createTextRange) {
    var range = elem.createTextRange();
    range.move('character', caretPos);
    range.select();
  } else if (elem.selectionStart) {
    elem.focus();
    elem.setSelectionRange(caretPos, caretPos);
  } else {
    elem.focus();
  }
}

$(document).ready(function() {
  $('input').focus(function() {
    setCaretPosition(this, 0);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input1" value=" km/h" />
<input type="text" id="input2" value=" kg" />

• 当您在任何输入内单击时，插入符号会设置在开头。
• 当您在输入之间 Tab 插入符号未设置。而是突出显示整个输入内容。

如何防止文本输入在使用标签导航时突出显示其内容？

我更喜欢不使用setTimeout 的答案（如果可能的话）。

Answer 1

在 Chrome 和 Explorer 上（不适用于 Edge 和 Firefox），只需：

<input type="text" value=" km/h" onfocus="this.setSelectionRange(this.value.length, this.value.length)"/>
<input type="text" value=" kg" onfocus="this.setSelectionRange(this.value.length, this.value.length)"/>

在 Firefox 和 Chrome 上（不适用于 Edge 和 Explorer）

jQuery.fn.putCursorAtEnd = function() {
  return this.each(function() {
    // Cache references
    var $el = $(this), el = this;
    
    // Timeout seems to be required for Firefox
    setTimeout(function() {
      el.setSelectionRange($el.val().length, $el.val().length);
    }, 0);
  });
};

var searchInput = $("input");

searchInput.on("focus", function() { // could be on any event
    searchInput.putCursorAtEnd()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value=" km/h" />
<input type="text" value=" kg" />