input元素onClick与onFocus对比：点击聚焦到输入末尾，换focus失效

咱们先拆解一下背后的核心原因——事件触发时机和浏览器原生光标定位逻辑的冲突：

1. click事件为啥能生效？ #

当你点击输入框时，浏览器的事件执行顺序是这样的：

• 首先触发mousedown：输入框立刻获得焦点，同时浏览器会记录你点击的位置，准备把光标放在那里
• 接着是mouseup
• 最后触发click事件

你的click事件处理函数是在最后一步执行的：这时候你通过val('').val(val)重新赋值输入框内容，这个操作会直接覆盖浏览器之前的光标定位，强制把光标放到内容末尾。因为这一步是在所有原生光标定位逻辑完成后执行的，所以最终光标会停在你想要的位置。

2. focus事件为啥失效？ #

focus事件的触发时机更早——它是在mousedown之后、mouseup和click之前就触发了。也就是说：

• 浏览器刚处理完mousedown，让输入框获得焦点，紧接着就触发了你的focus处理函数
• 你在函数里把光标移到了末尾，但之后浏览器还会执行之前mousedown阶段记录的“把光标放到点击位置”的逻辑，直接把你的操作覆盖了

另外还有个场景：如果输入框已经处于聚焦状态，你再次点击它时，focus事件根本不会触发（因为输入框已经聚焦了），但click事件依然会触发，这时候用focus绑定的话，光标就不会自动移到末尾了。

更靠谱的实现方式 #

其实你用的val('').val(val)是个小hack，并不是最稳定的方法。推荐用标准的光标控制API，兼容所有浏览器：

$(function() {
  $('#test-input').on('click', function(evt) {
    const inputEl = evt.target;
    inputEl.focus();
    // 现代浏览器处理方式
    if (typeof inputEl.selectionStart === 'number') {
      inputEl.selectionStart = inputEl.selectionEnd = inputEl.value.length;
    } 
    // 兼容IE8及更早版本
    else if (inputEl.createTextRange) {
      const textRange = inputEl.createTextRange();
      textRange.collapse(false); // 把光标移到内容末尾
      textRange.select();
    }
  });
});

如果需要适配focus事件（比如处理用户用Tab键聚焦输入框的情况），可以用setTimeout把光标调整逻辑延迟到下一轮事件循环，避开浏览器的原生定位：

$(function() {
  $('#test-input').on('focus', function(evt) {
    const inputEl = evt.target;
    setTimeout(() => {
      if (typeof inputEl.selectionStart === 'number') {
        inputEl.selectionStart = inputEl.selectionEnd = inputEl.value.length;
      } else if (inputEl.createTextRange) {
        const textRange = inputEl.createTextRange();
        textRange.collapse(false);
        textRange.select();
      }
    }, 0);
  });
});

内容的提问来源于stack exchange，提问作者Expert wanna be