Question

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

假设我想在用户键入的内容后附加“is a hat”。

让我们说用户开始在字段中输入“我的朋友”。

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

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
...

我开始为keypress事件编写一个函数，但后来我意识到我最终会得到像

这样的东西

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

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

替换旧后缀
将光标放回用户键入的位置
确保他们只能在后缀之前输入，因此他们无法编辑后缀

Answer 1

你可以这样附加span：

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

Answer 2

你可以试试这个

<强> JS

$("input").keyup(function() {
    $(".dynamic").html(this.value);
});

<强> HTML

<input type="text" />
<div>
    <span class="dynamic"></span>
    <span class="static"> is a hat </span>
</div>

<强> Check Fiddle

您将基本上定位包含动态文本的范围，并根据keyup事件呈现html。

Answer 3

this following example work perfectly .  
 **html**

    <input type="text" id="text"/>
    <p><span id="app"></span>
    <span>this is a hat</span>
    <p>

    **script**
    ----------
    $("#text").keyup(function(){
        $("#app").text($("input").val());
    });

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

3 个答案: