Question

当用户点击输入框时，将焦点移到输入的末尾，我使用这样的东西，

＆＃13;

$(function() {
    $('#test-input').on('click', function(evt) {
    $target = $(evt.target);
    var val = $target.val();

    $target.val('').val(val);
  });
}())

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="test" id="test-input" value="abcdefgh" />

＆＃13;

但如果我改变了“点击”字样。为了专注，它不起作用。

＆＃13;

$(function() {
    $('#test-input').on('focus', function(evt) {
    $target = $(evt.target);
    var val = $target.val();

    $target.val('').val(val);
  });
}())

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="test" id="test-input" value="abcdefgh" />

＆＃13;

在这种情况下onClick和onFocus的操作有何不同？

Answer 1

存在一些差异：

onClick ：只要用户点击某个对象（如按钮，图片，输入），就会触发此事件...点击后，会出现：

onFocus ：选择某个元素时不会触发此事件，可以通过编程方式完成，调用.focus()或使用例如，密钥选项卡。此外，使用onFocus代替onClick可以帮助避免冒泡。

要完成，请使用下面的代码段（我添加了更多输入，并使用TAB循环显示（或者也单击），您将看到插入符号将在所有时间结束。
为什么我添加了超时？ Chrome浏览器有一个奇怪的怪癖，在光标移动到字段之前焦点事件会触发，因此，事件必须等到光标到达那里才能将光标移动到最后。

$(function() {
    $('.test-input').on('focus', function(evt) {
    that = this;
    setTimeout(function(){
      that.selectionStart = that.selectionEnd = 10000;
      },
    1);
  });
}())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="test" class="test-input" value="abcdefgh" />
<input type="text" name="test" class="test-input" value="a1b2c3" />
<input type="text" name="test" class="test-input" value="abcdefghijklmnop" />

额外：如果你只是为手机编程，那么看看“触摸事件”（https://developer.mozilla.org/pt-BR/docs/Web/Events/touchstart）

会很高兴

Answer 2

首次单击文本框时，这应该可以正常工作。这是在触发焦点事件时，因为您实际上“专注于”该项目。从那时起，直到您点击元素外的任何位置，您的项目将具有焦点，因此不会执行onfocus事件。

Answer 3

主要区别在于焦点事件调用，任何时候您将专注于输入字段，如果您使用选项卡按钮并专注于输入字段，但如果单击，您需要单击输入字段。

Answer 4

我认为这与在关注点击时执行的代码在关注输入并影响光标位置之前的事实有关。

另一方面，当您收听焦点事件时，光标已经有一个位置并保持在此位置。

那是纯粹的个人理论。但是，如果你想让它发挥作用，我发现了一个适用于Chrome的优秀解决方案：Use JavaScript to place cursor at end of text in text input element

您需要清除输入的值，等待一毫秒，然后重新应用该值：

$(function() {
    $('#test-input').on('focus', function(evt) {
      $target = $(evt.target);
      var val = $target.val();
      $target.val('');
      setTimeout(() => {
        $target.val(val)
      },1)
  });
})

输入元素

4 个答案: