【发布时间】：2017-06-28 13:20:24
【问题描述】：
当我在粉红色文本框中写入新文本并按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>【问题讨论】：
-
我认为这是因为当你点击输入时它会选择文本，所以当你按下回车键时，它会用回车符（\r 或 \n）替换当前文本，这就是为什么你的文本消失。
-
@Nicolas 我认为选择文本非常好。但问题是，当我不更改文本时，文本消失了