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/