將文本追加到HTML文本輸入時

Question

我想用jquery將文本追加到用戶在文本框中鍵入的內容，而用戶正在鍵入內容。

說我想追加「是一頂帽子」到用戶輸入的結尾。

可以說用戶開始在該字段中輸入「我的朋友」。

當他們輸入框將改爲：

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); 
}); 

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()); 
    });