jquery how append text to text area while typing

Question

I need to add a static text to textarea while typing.

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

The above code adds " my text" to textarea, and after that if I continue typing, it starts to type after "text" word. I need my cursor stay always before " my text".

you can use this technique to set the cursor to the cursorpostino you want: http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area — Mario A, Apr 02 '15 at 08:40

score 2 · Answer 1 · edited May 23 '17 at 12:25

2

You need a function to get the cursor position:

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

And a function to set the cursor position:

jQuery Set Cursor Position in Text Area

Then you can do what you want:

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

Here is a jsfiddle: http://jsfiddle.net/b69v5fvs/

edited May 23 '17 at 12:25

Community

1
1

answered Apr 02 '15 at 08:52

Mario A

3,286
1
17
22

It works, but I do with 2 lines of CSS what you do with 60 lines of javascript. And my answer got downvoted. – Jeremy Thille Apr 02 '15 at 09:12
You have a clever solution, but not for the OPs problem. The task is to work with a textarea. To use your contenteditable tag in a form would require more javascript. – Mario A Apr 02 '15 at 09:25
I agree with that. But if by chance, they can work with something else than a textarea, I provided an alternative solution that would be lighter. If they can't, well your answer works best =) So +1 to you too. – Jeremy Thille Apr 02 '15 at 09:28

score 1 · Answer 2 · answered Apr 02 '15 at 08:50

1

With an input field or a textarea, it's dirty and doesn't work well (especially when deleting...)

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"/>

I would rather use a contenteditable element, with an :after in pure CSS :

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

<p contenteditable></p>

answered Apr 02 '15 at 08:50

Jeremy Thille

26,047
12
43
63

_I need my cursor stay always before " my text"._ is it mentioning it? – Jai Apr 02 '15 at 08:54
That's the case. Try it. – Jeremy Thille Apr 02 '15 at 08:59
does not seem to be i can see the cursor at the end every time i type. – Jai Apr 02 '15 at 09:01
It works for me in Chrome. Anyway, the result is correct, even if the cursor isn't _visually_ at the right character in FF or other browser : `whatever you type + my text`. It can't be otherwise with an `:after`. Did you correct your non-working answer? :) – Jeremy Thille Apr 02 '15 at 09:04
No need to get angry. Your solution works perfectly for me. +1 for that. – Mario A Apr 02 '15 at 09:19
Thanks Mario! I get angry because people on SO have an habit to downvote without reason. Good answers get downvoted without any comment, sometimes even after the OP says "Thanks it worked". And that gets on my nerves. – Jeremy Thille Apr 02 '15 at 09:25

jquery how append text to text area while typing

2 Answers2