javascript - 输入元素上的 onClick 与 onFocus

Question

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

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

    $target.val('').val(val);
  });
}())

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

但是如果我将“点击”更改为“聚焦”，它就不起作用了。

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

    $target.val('').val(val);
  });
}())

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

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

Answer 1

有一些区别:

onClick : 每当用户点击一个对象，如按钮、图像、输入...点击后，就会触发此事件:

onFocus :选择元素时会触发此事件，不需要单击它，可以通过编程方式完成，例如调用 .focus() 或使用 Tab 键。此外，使用 onfocus 而不是 onclick 可以帮助避免 bubbling .

最后，使用下面的代码片段(我添加了更多输入，使用 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" />

额外的:如果您只是为手机编程，那么看看 touchEvents ( https://developer.mozilla.org/pt-BR/docs/Web/Events/touchstart )

会很不错