How can I prevent that text is removed from textarea on press Enter-Key?

Question

When I write a new text into my pink textbox and press enter the new text is updated inside that box.

But, if I just click inside the pink textbox and are not doing any changes and then press enter, then the text, that was standing there, is removed. It should not be removed. If I do not do any changes, then the text that was already there should keep being there.

function editable() {

        $(document).on('click', '.editable', function (event) {

            var element_height = $(this).closest( "td" ).height();
            var element_width = $(this).closest( "td" ).width();
            if ($(this).children("textarea").length > 0)
                return false;
            var tdObj = $(this);
            var preText = tdObj.html();
       var inputObj = $("<textarea>");
            tdObj.html("");
            inputObj.width(tdObj.width())
                .height(tdObj.height())
                .css({
                border: "0px",
                height: element_height,
                width: element_width,
            })
                .val($.trim(preText))
                .appendTo(tdObj)
                .trigger("focus")
                .trigger("select");
            inputObj.keyup(function (event) {
                
                if (13 == event.which) { // press ENTER-key
 
                    var datagroup = tdObj.data("group");
                    var dataid = tdObj.data("id");
                    var datacell = tdObj.data("cell");
                    var text = $(this).val();
   
                    
                    $("#" + datacell + "").val(text);
           
                    var number = text.replace(/,/g, ".");
                    tdObj.data('value', number);
                    var newData = tdObj.data("value")
                    tdObj.html(text);
            

                } else if (27 == event.which) { // press ESC-key
                    tdObj.html(preText);
                }
            });
            inputObj.click(function () {
                return false;
            });
            inputObj.blur(function (event) {
                tdObj.html(preText);
            });
        });
    }
    editable();

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


<table>
  <thead>
    <tr style="background-color: #f9f9f9">
    <th class="td_name">Animal</th>
    </tr>
  </thead>
  <tr>
    <td class="td_description" style="background-color:pink">
      <input class="description_input" name="description[]" type="hidden" value="cat">
      <div style="width:100%; min-height:30px;" class="description editable td_textarea" data-value="cat">cat
      </div>
    </td>
  </tr>
</table>

Answer 1

remove the .trigger('select') .

Updated

function editable() {

        $(document).on('click', '.editable', function (event) {

            var element_height = $(this).closest( "td" ).height();
            var element_width = $(this).closest( "td" ).width();
            if ($(this).children("textarea").length > 0)
                return false;
            var tdObj = $(this);
            var preText = tdObj.html();
       var inputObj = $("<textarea>");
            tdObj.html("");
            inputObj.width(tdObj.width())
                .height(tdObj.height())
                .css({
                border: "0px",
                height: element_height,
                width: element_width,
            })
                .val($.trim(preText))
                .appendTo(tdObj)
                .trigger("focus")
                .trigger("select")
               
            inputObj.keydown(function (event) {
                
                if (13 == event.which) { // press ENTER-key
                    var datagroup = tdObj.data("group");
                    var dataid = tdObj.data("id");
                    var datacell = tdObj.data("cell");
                    var text = $(this).val();
   
                    
                    $("#" + datacell + "").val(text);
           
                    var number = text.replace(/,/g, ".");
                    tdObj.data('value', number);
                    var newData = tdObj.data("value")
                    tdObj.html(text);
            

                } else if (27 == event.which) { // press ESC-key
                    tdObj.html(preText);
                }
            });
            inputObj.click(function () {
                return false;
            });
            inputObj.blur(function (event) {
                tdObj.html(preText);
            });
        });
    }
    editable();

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


<table>
  <thead>
    <tr style="background-color: #f9f9f9">
    <th class="td_name">Animal</th>
    </tr>
  </thead>
  <tr>
    <td class="td_description" style="background-color:pink">
      <input class="description_input" name="description[]" type="hidden" value="cat">
      <div style="width:100%; min-height:30px;" class="description editable td_textarea" data-value="cat">cat
      </div>
    </td>
  </tr>
</table>

Or

Try with keydown instead of keyup

function editable() {

        $(document).on('click', '.editable', function (event) {

            var element_height = $(this).closest( "td" ).height();
            var element_width = $(this).closest( "td" ).width();
            if ($(this).children("textarea").length > 0)
                return false;
            var tdObj = $(this);
            var preText = tdObj.html();
       var inputObj = $("<textarea>");
            tdObj.html("");
            inputObj.width(tdObj.width())
                .height(tdObj.height())
                .css({
                border: "0px",
                height: element_height,
                width: element_width,
            })
                .val($.trim(preText))
                .appendTo(tdObj)
                .trigger("focus")
                .trigger("select")
               
            inputObj.keydown(function (event) {
                
                if (13 == event.which) { // press ENTER-key
                    var datagroup = tdObj.data("group");
                    var dataid = tdObj.data("id");
                    var datacell = tdObj.data("cell");
                    var text = $(this).val();
   
                    
                    $("#" + datacell + "").val(text);
           
                    var number = text.replace(/,/g, ".");
                    tdObj.data('value', number);
                    var newData = tdObj.data("value")
                    tdObj.html(text);
            

                } else if (27 == event.which) { // press ESC-key
                    tdObj.html(preText);
                }
            });
            inputObj.click(function () {
                return false;
            });
            inputObj.blur(function (event) {
                tdObj.html(preText);
            });
        });
    }
    editable();

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


<table>
  <thead>
    <tr style="background-color: #f9f9f9">
    <th class="td_name">Animal</th>
    </tr>
  </thead>
  <tr>
    <td class="td_description" style="background-color:pink">
      <input class="description_input" name="description[]" type="hidden" value="cat">
      <div style="width:100%; min-height:30px;" class="description editable td_textarea" data-value="cat">cat
      </div>
    </td>
  </tr>
</table>