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

Question

我的目标

当用户聚焦输入时：如果它为空，我们插入前缀文本并将光标移动到结尾。如果它们显示在输入中，它也应该有用。

上下文/演示

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

问题

默认情况下，光标将出现在他们点击的位置，即可能位于前缀的中间位置。我发现this mini plugin将光标移动到最后，如果你把它放在一个单击事件处理程序中，这很有效，但是如果你选择输入，这就不会激发。我尝试将它放在焦点事件处理程序中，但是这不起作用（我认为因为在焦点事件之后触发了click事件）。

奖励积分

对于一个简单，优雅的解决方案，不使用全局变量，并且可能使用最少数量的事件侦听器。如果可能的话，在将光标移动到最后之前，不要将光标显示在它们所在的位置。

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。