Textarea. On Shift + Enter, apend html line break.How?

Question

I found a textarea plugin on the internet and modified it a bit to suite my needs. It works the way I want to except for one minor detail.

As you can see, it expands and collapses the textarea as I type or delete characters.

Iif I press enter, it generates a comment div containing the contents I've typed in the textarea.

My question is, **how to I append a <br /> to my new_comment variable each time a user presses Shift + Enter?

/*!
 * ----------------------------------------------------------------------------
 * "THE BEER-WARE LICENSE" (Revision 42):
 * <jevin9@gmail.com> wrote this file. As long as you retain this notice you
 * can do whatever you want with this stuff. If we meet some day, and you think
 * this stuff is worth it, you can buy me a beer in return. Jevin O. Sewaruth
 * ----------------------------------------------------------------------------
 *
 * Autogrow Textarea Plugin Version v2.0
 * http://www.technoreply.com/autogrow-textarea-plugin-version-2-0
 *
 * Date: March 13, 2011
 */
jQuery.fn.autoGrow = function(){

    return this.each(function(){
        // Variables
        var colsDefault = this.cols;
        var rowsDefault = this.rows;

        //Functions

        var grow = function() {
            growByRef(this);
        }



        var onFocus = function(obj) {

      if ($(this).val() != 'Write a comment...') {
        return;
      } else {
        $(this).parents(".comment_new_container").children("img").show();
        //$(this).height(34);
        $(this).width(745);
        $(this).val(''); 
      }

        }

        var onBlur = function(obj) {

      if ($(this).val().length == 0) { 
        $(this).parents(".comment_new_container").children("img").hide();
        //$(this).height(16);
        $(this).width(795);
        $(this).val('Write a comment...');
      } 

        }


        var growByRef = function(obj) {

        var new_comment = '';

      if (!obj.shiftKey && obj.keyCode == 13) {

        obj.preventDefault();

        new_comment += '<div class="comment_container" id="001">';
        new_comment += '<a href="#"><i class="comment_delete">&nbsp;</i></a>';
        new_comment += '<img src="img/avatar45.png" />';
        new_comment += '<a href="/">Mickey Mouse</a>';
        new_comment += '<br/>';
        new_comment += '<div class="comment_content">' + $(this).val(); + '</div> <!-- End comment_content -->';
        new_comment += '<div class="comment_timestamp">13 minutes ago</div> <!-- End comment_timestamp -->';
        new_comment += '</div> <!-- End comment_container -->';

        $(new_comment).insertBefore($(this).parents(".comment_new_container"));

            var comment_total = parseInt($('.social_menu_right li a').children('.meta.comment_total').text(), 10) + 1;
          $('.social_menu_right li a').children('.meta.comment_total').text(comment_total);


        $(this).val('Write a comment...');
        $(this).blur();
        growByRef(this);



      } else {

        var linesCount = 0;
        var lines = obj.value.split('\n');

        for (var i=lines.length-1; i>=0; --i)
        {
          linesCount += Math.floor((lines[i].length / colsDefault) + 1);
        }

        if (linesCount >= rowsDefault) {
          obj.rows = linesCount + 1;
        } else {
          obj.rows = rowsDefault;           
        }

            }

    }

        var characterWidth = function (obj){
            var characterWidth = 0;
            var temp1 = 0;
            var temp2 = 0;
            var tempCols = obj.cols;

            obj.cols = 1;
            temp1 = obj.offsetWidth;
            obj.cols = 2;
            temp2 = obj.offsetWidth;
            characterWidth = temp2 - temp1;
            obj.cols = tempCols;

            return characterWidth;
        }

        // Manipulations

        $(this).css("width","auto");
        $(this).css("height","auto");
        $(this).css("overflow","hidden");

        this.style.width = ((characterWidth(this) * this.cols) + 6) + "px";

        $(this).bind("focus", onFocus);
        $(this).bind("blur", onBlur);
        $(this).bind("keypress", growByRef);
        $(this).bind("keyup", grow);

    });
};

Thank you guys.

I've not tested but if you simply append a br after `$(this).val('Write a comment...')` works? — Alex Ball, Jul 20 '12 at 15:07
[Here's another question](http://stackoverflow.com/questions/6014702/how-do-i-detect-shiftenter-and-generate-a-new-line-in-textarea?rq=1) that covers similar ground. It looks like the code already allows shift-enter to add a newline to the textbox, so you can probably get away with a regex: `new_comment += '
' + $(this).val().replace(/\n/g, '
'); + '
` (untested though). — meloncholy, Jul 20 '12 at 15:20
beautiful. you sir, rock. As always I have no idea how to accept a comment as an answer but I accept yours. — suchislife, Jul 20 '12 at 15:23
Excellent, glad it worked. Wasn't sure if it was worthy of a full answer so I put it down here. :) Looks like yent came up with the same idea actually. — meloncholy, Jul 20 '12 at 15:31

score 1 · Answer 1 · answered Jul 20 '12 at 15:15

1

try adding this at the top of the growByRef function :

  if (obj.shiftKey && obj.keyCode == 13) {
    $(this).val($(this).val() + "\n");
    return;
  }

answered Jul 20 '12 at 15:15

yent

1,303
1
8
10

Remember that Shift + Enter already inserts a new line... I need to make it so when I build the new_comment variable, it appends html
to it each time a user presses shift enter. I am not trying to modify the behavior of the textarea. I am trying to capture Shift + Enter Press and turn it into html
– suchislife Jul 20 '12 at 15:18
My bad, in growByRef, when creating the comment, try replacing $(this).val() by $(this).val().replace(/\n/g, '
') – yent Jul 20 '12 at 15:21

score -1 · Answer 2 · edited May 23 '17 at 11:56

-1

check out these two links here

This case is similar to yours here

edited May 23 '17 at 11:56

Community

1
1

answered Jul 20 '12 at 15:12

Shortys Oberto Dutari

558
6
17

Textarea. On Shift + Enter, apend html line break.How?

2 Answers2