在焦点输入上：插入值并将光标移动到结尾

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。