jquery如何將文本附加到文本區域，同時打字

Question

我需要在輸入時添加靜態文本到textarea。

var text= " my text"; 
$("#myInput").keydown(function() { 
    $("#myInput").val(this.value + text); 
}); 

上面的代碼將「我的文本」添加到textarea，之後如果我繼續輸入，它將開始在「文本」字之後鍵入。我需要將光標始終保留在「我的文本」之前。

Answer 1

有一個輸入字段或一個文本，它是髒的，並不能很好的工作（刪除時尤其是...）

var text= " my text"; 
 
$("#myInput").keyup(function() { 
 
    $(this).val(this.value.replace(text,"") + text); 
 
});

input{ 
 
    width : 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="myInput"/>

我寧願使用contenteditable元素，一個:after純CSS：

p{ 
 
    min-width : 300px; 
 
    border: grey solid 1px; 
 
} 
 
p:after{ 
 
    content:" my text" 
 
}

<p contenteditable></p>

Answer 2

你需要一個函數來獲取光標的位置：

Get cursor position (in characters) within a text Input field

，並設置光標位置的功能：

jQuery Set Cursor Position in Text Area

然後，你可以做你想做的：

var text= "my text"; 
var textIsSet = false; 
$("#myInput").keydown(function() { 
    var cpos = doGetCaretPosition(this); 
    if(!textIsSet) { 
     $(this).val(this.value + text); 
     textIsSet = true; 
    } 
    setCaretToPos(this, cpos); 
}); 

這裏是一個jsfiddle：http://jsfiddle.net/b69v5fvs/