如何防止从按回车键的文本区域中删除该文本？

Question

当我将新文本写入粉红色文本框并按enter时，新文本将在该框内更新。

但是，如果我只是在粉色文本框内单击，并且没有做任何更改，然后按enter，那么站在那里的文本就会被删除。它不应该被移除。如果我不做任何修改，那么已经存在的文本应该继续存在。

​

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

删除.trigger('select')。

更新的

​

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>

​

或

尝试使用keydown而不是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>

​