如何避免从contenteditable中删除键入的文本在jQuery中>> 我正在使用jQuery UI可拖动组件将<span>添加到可编辑<p>的内容。 [预期输出是，第<p>段应该是可编辑的，并且可拖动组件应该能够拖放到段落，并且<p>的内容也应该是可编辑的。我的代码有问题。当我在<p>内键入内容并单击外部<p>时。从段落中删除的键入的单词。我的代码如下： $(function() { function textWrapper(str, sp, btn) { if (sp == undefined) { sp = [0, 0]; } var txt = ""; if (btn) { txt = "<span class='w b'>" + str + "</span>"; } else { txt = "<span class='w'>" + str + "</span>"; } if (sp[0]) { txt = " " + txt; } if (sp[1]) { txt = txt + " "; } return txt; } function chunkWords(p) { var words = p.split(" "); words[0] = textWrapper(words[0], [0, 1]); var i; for (i = 1; i < words.length; i++) { var re = /\[.+\]/; if (re.test(words[i])) { var b = makeTextBox(words[i].slice(1, -1)); words[i] = " " + b.prop("outerHTML") + " "; } else { if (words[0].indexOf(".")) { words[i] = textWrapper(words[i], [1, 0]); } else { words[i] = textWrapper(words[i], [1, 1]); } } } return words.join(""); } function unChunkWords(tObj) { var words = []; $(".w", tObj).each(function(i, el) { console.log($(el).text(), $(el).attr("class")); if ($(el).hasClass("b")) { words.push("[" + $(el).text().trim() + "]"); } else { words.push($(el).text().trim()); } }); return words.join(" "); } function makeBtn(tObj) { var btn = $("<span>", { class: "ui-icon ui-icon-close" }).appendTo(tObj); } function makeTextBox(txt) { var sp = $("<span>", { class: "w b" }).html(txt); makeBtn(sp); return sp; } function makeDropText(obj) { return obj.droppable({ drop: function(e, ui) { var txt = ui.draggable.text(); var newSpan = textWrapper(txt, [1, 0], 1); $(this).after(newSpan); makeBtn($(this).next("span.w")); makeDropText($(this).next("span.w")); $("span.w.ui-state-highlight").removeClass("ui-state-highlight"); }, over: function(e, ui) { $(this).add($(this).next("span.w")).addClass("ui-state-highlight"); }, out: function() { $(this).add($(this).next("span.w")).removeClass("ui-state-highlight"); } }); } $("p.given").html(chunkWords($("p.given").text())); $("p.given").on("click", ".b > .ui-icon", function() { $(this).parent().remove(); }); $("p.given").blur(function() { var w = unChunkWords($(this)); console.log(w); $(this).html(chunkWords(w)); makeDropText($("p.given span.w")); }); $("span.given").draggable({ helper: "clone", revert: "invalid" }); makeDropText($("p.given span.w")); }); p.given { display: flex; flex-wrap: wrap; } p.given span.w span.ui-icon { cursor: pointer; } div.blanks { display: inline-block; min-width: 50px; border-bottom: 2px solid #000000; color: #000000; } div.blanks.ui-droppable-active { min-height: 20px; } span.answers>b { border-bottom: 2px solid #000000; } span.given { margin: 5px; } <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="row"> <p class="given" contenteditable="true">Lorem Ipsum is simply dummy text of the printing and typesetting industry. [Lorem] Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <div class="divider"></div> <div class="section"> <section> <div class="card blue-grey "> <div class="card-content white-text"> <div class="row"> <div class="col s12"> <span class="given btn-flat white-text red lighten-1" rel="1">the Santee, thDakota</span> <span class="given btn-flat white-text red lighten-1" rel="2">America</span> <span class="given btn-flat white-text red lighten-1" rel="3">Qatar</span> <span class="given btn-flat white-text red lighten-1" rel="4">Philippines</span> </div> </div> </div> </div> </section> </div> 问题间歇出现。我正在使用jQuery UI的可拖动组件将添加到内容可编辑。预期的输出是，段落 - javascript - SO中文参考