How to change only one line in a textarea?

Question

I have a textarea and every time the user enters "enter", I would like to populate the current line with a value.

I want to nudge the user to start each line with a certain phrase, such as "I am".

HTML:

  <textarea class="texty"></textarea>

CSS:

.texty {
    width: 400px;
    height: 300px;
}

jQuery:

$(document).ready(function() {
    $(".texty").bind("keydown", function(e) {
        if (e.which == 13) {
            // User entered a newline.
            // Start the line with the phrase "I am"
            console.log("enterrrrr");
        }
    });
});

JSFIDDLE

Thank you for the help.

If you want it to insert text at cursor position there are a lot of other solutions - just search Google. Check e.g. http://stackoverflow.com/q/1064089/2028935 — Beauvais, Mar 31 '14 at 18:43

Kiran · Accepted Answer · 2014-03-31T19:02:36.740

3

.keyup(): Event fired when a key is released on the keyboard.
.keydown(): Event fired when a key is pressed on the keyboard.

As you are trying to start new line with "I am" you should use .keyup() which will fire when a key is released.

If you want to add text I am at the end of the textarea value. Try this:

$(document).ready(function() {
    $(".texty").bind("keyup", function(e) {
        if (e.which == 13) {
            $(this).val($(this).val()+"I am ");
        }
    });
});

DEMO

If you would like to add `I am at any place when user press enter. Try this:

$(document).ready(function() {
    $(".texty").bind("keyup", function(e) {
        if (e.which == 13) {
            var caretPos = $('.texty')[0].selectionStart;
            var textAreaTxt = $(this).val();
            var txtToAdd = "I am ";
            $(this).val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
        }
    });
});

DEMO

edited Mar 31 '14 at 19:02

answered Mar 31 '14 at 18:32

Kiran

20,167
11
67
99

If I press some times `enter` and then return some lines back and press `enter` again, your code doesn't work properly. – Al.G. Mar 31 '14 at 18:37
@user3132718: Check fiddle its workfing fine. Can you explain in which case its not working? – Kiran Mar 31 '14 at 18:39
press 3 times `enter`. Then go on line 2 and press enter again. – Al.G. Mar 31 '14 at 18:43
1

@user3132718 - the requester did not specify if this is a valid option or not (to append text to the textarea) so until then this is a good/simple solution – Beauvais Mar 31 '14 at 18:45
@user3132718: Updated answer with both cases. Thanks bro :) – Kiran Mar 31 '14 at 19:02

score 2 · Answer 2 · answered Mar 31 '14 at 18:37

You were almost there. You just needed to append the text to the element.

You can do this with .val():

$('.texty').val($('.texty').val() + '\nI am');
e.preventDefault(); // We already appended a new line before "I am", so prevent default enter action

See your updated fiddle here

score -1 · Answer 3 · answered Mar 31 '14 at 18:39

-1

use keypress event instead of keydown

$('.texty').bind('keypress', function(e) {
    if ((e.keyCode || e.which) == 13) {

Demo

answered Mar 31 '14 at 18:39

Ashok Shah

956
12
39

This is not the answer to the question - at best it is an improvement of his existing code – Beauvais Mar 31 '14 at 18:40

How to change only one line in a textarea?

3 Answers3