Question

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

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

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

看看这个：

＆＃13;

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);
  });
});

＆＃13;

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

＆＃13;

当您在任何输入中单击时，插入符号设置在开头。
当您在输入之间 Tab 时未设置插入符号。相反，整个输入内容都是高亮的。

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

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

Answer 1

在Chrome和资源管理器上（不在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和资源管理器上工作）

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

如何在输入之间选项卡时阻止突出显示所有文本？

1 个答案: