jquery - 键入时将文本附加到 html 文本输入中

Question

我想在用户键入时使用 jquery 将文本附加到用户在文本框中键入的内容。

假设我想在用户输入的内容末尾附加“是一顶帽子”。

假设用户开始在字段中输入“我的 friend ”。

当他们输入时，该框将显示:

M -> M is a hat
y -> My is a hat
  -> My  is a hat
F -> My F is a hat
r -> My Fr is a hat
...

我开始为按键事件编写一个函数，但后来我意识到我最终会得到类似的东西

M -> M is a hat
y -> M is a haty is a hat
...

所以我想知道的是我应该如何

1. 替换旧后缀
2. 将光标放回用户输入的位置
3. 确保他们只能在后缀之前输入内容，这样他们就无法编辑后缀

Answer 1

您可以像这样附加到span:

var phrase = " is a hat";
$("#idOfInput").keydown(function() {
    $("#idOfSpan").html(this.value + phrase);
});