javascript - 焦点输入 : insert value and move cursor to end

Question

我的目标是什么

当用户聚焦输入时:如果它是空的，我们插入前缀文本并将光标移动到末尾。如果他们进入输入，它也应该有效。

上下文/演示

我正在制作一个 jQuery 插件，它在电话号码输入旁边添加一个标志下拉列表。当用户聚焦输入时，它会填充一个小前缀(所选国家/地区的拨号代码)。 Demo here .

问题

默认情况下，光标会出现在他们点击的地方，即可能出现在前缀的中间)。我找到了 this mini plugin将光标移动到末尾，如果将其放在单击事件处理程序中，效果很好，但是如果您跳入输入，则不会触发。我尝试将其放入焦点事件处理程序中，但这没有用(我认为是因为点击事件在焦点事件之后触发)。

奖励积分

对于一个简单、优雅的解决方案，不使用全局变量，并且事件监听器的数量尽可能少。此外，如果可能，请不要在将光标移动到末尾之前将光标显示在他们点击的位置。

Answer 1

这是迄今为止我想出的最好的解决方案。它符合所有方框，但它不是最优雅的解决方案——我觉得我可能遗漏了一些明显的东西。理想情况下，它只需要一个事件监听器。

var input = $("input"),
  prefix = "prefix ";

input.focus(function(e) {
  if (!input.val()) {
    input.val(prefix);
  }
});

input.mousedown(function(e) {
  // mousedown decides where the cursor goes, so if we're focusing
  // we must prevent this from happening
  if (!input.is(":focus") && !input.val()) {
    e.preventDefault();
    // but this also cancels the focus, so we must trigger that manually
    input.focus();
    putCursorAtEnd(input);
  }
});

这是一个 codepen demo .