当我单击另一个div时，在contenteditable div的插入符号处附加一个跨度

Question

我正在尝试在“ +”和“基本”之间插入travelAllowance，如下图所示，而不删除当前的。

完整的代码如下。 我已经搜索了整个互联网，但找不到答案。

 $(document).ready(function(){ debugger; $("#display").html(""); var formula = ""; var data = [ "BasicPay ", "OverTime ", "TravelAllowance ", "DearnessAllowance ", "FoodAllowance ", "providentFund " ]; $( "#autofill" ).autocomplete({ source:data, autoFocus: true , select: function( event, ui ) { debugger; $("#display").append("<span class='block' contentEditable='false'>" + ui.item.value + "</span>"); $( "input[name='autofill']").val(""); return false; } }); $("#showPayTypes").html("Allowed Pay Types are : " + data.toString()); $(".operators").click(function(){ debugger; var selectedOperator = $(this).html(); $("#display").append("<span contentEditable='false' class='block'>" + selectedOperator + " " + "</span>"); }); $("#delete").click(function(){ debugger; if ($("#display span").first().attr('class') == "noClass") { var yourString = $.trim($("#display").text()); var result = yourString.substring(1, yourString.length-1); var formulaArray = result.split(" "); formulaArray.forEach(main); function main(arrayItem, index, array) { debugger; var regExForOnlyNum = RegExp(/^\\d+$/).test(arrayItem); if (regExForOnlyNum == true) { var bracesSpanObj = "<span contentEditable='false' class='numbers'>" + arrayItem+ " " + "</span>"; formulaArray[index] = bracesSpanObj; }else if (arrayItem == '(' || arrayItem == ')') { var bracesSpanObj = "<span contentEditable='false'>" + arrayItem+ " " + "</span>"; formulaArray[index] = bracesSpanObj; } else if (arrayItem != "") { var spanObj = "<span contentEditable='false' class='block'>" + arrayItem+ " " + "</span>"; formulaArray[index] = spanObj; }else{ $(this).remove(); }; } $("#display").html(formulaArray); /*$("#display").html(result);*/ /*var result = yourString.slice(1, -1);*/ /*$("#display span").first().remove();*/ }else{ $("#display span").last().remove(); } }); $("#enterNum").keypress(function(e){ if (e.which == 13) { debugger; var text = $("#enterNum").val(); if (text != "") { $("#display").append("<span contentEditable='false' class='numbers'>"+ text + " " + "</span>"); /*onclick = 'makeItEdit()'*/ $("#enterNum").val(""); }else{ alert("please enter some value....") return false; }; } }); $(".numbers").bind $(".braces").click(function(){ debugger; var value= $(this).html(); $("#display").append("<span contentEditable='false'>" + value + " " + "</span>"); }); $(".wrapIn").click(function(){ debugger; $("#display").html("<span contentEditable='false' class='noClass'>( " + $("#display").html() + ") "+ "</span>"); }); $("#saveFormula").click(function(){ debugger; var formulaForValidation = $.trim($("#display").text()); alert("the formula created by u is ==" + formulaForValidation); var operatorsAtTheEnd = RegExp(/^[a-zA-Z0-9(]+(.*[a-zA-Z0-9%)])*$/).test(formulaForValidation); if (operatorsAtTheEnd == true) { formula = $("#display").text(); console.log(formula); $("#display").html(""); }else{ alert("unfortunately the format you entered is incorrect"); return false; }; }); $("#getFormula").click(function(){ debugger; alert("formula received from server=="+"'"+formula+"'"); var formulaArray = formula.split(" "); formulaArray.forEach(main); function main(arrayItem, index, array) { debugger; if (arrayItem == '(' || arrayItem == ')') { var bracesSpanObj = "<span contentEditable='false'>" + arrayItem+ " " + "</span>"; formulaArray[index] = bracesSpanObj; } else if (arrayItem != "") { var spanObj = "<span contentEditable='false' class='block'>" + arrayItem+ " " + "</span>"; formulaArray[index] = spanObj; }else{ $(this).remove(); }; } debugger; console.log("formulaArray ===== " +formulaArray); $("#display").html(formulaArray); }); /*function makeItEdit(){ debugger; $(".numbers").attr('contentEditable', true); } */ $("#display").click(function(e) { debugger; var target = $(e.target), article; if(target.is('.numbers')) { $(".numbers").attr('contentEditable', true); return false; } else { $(".numbers").attr('contentEditable', false); return false; } }) }); 

 #display{ padding: 5px; border:5px double #c38600; width: 682px; min-height: 110px; margin: 10px auto; font-weight: bold; font-size: 50px; border-radius: 15px; color: #abcdef; outline: none; } #input{ border: 1 px solid white; width: 701px; min-height: 50px; margin: 5px auto; } #autofill{ width: 500px; margin-left: 10PX; padding: 2px; padding-left: 10px; border: none; border-bottom: 1px solid green; font-size: 30px; color: #864566; } #autofill:focus{ border: none; border-bottom: 1px solid green; outline: none; } label{ font-size: 30px; color: #864566; } #operatorsBlock{ width: 701px; height: 50px; border:5px double #c38600; margin: 5px auto; border-radius: 8px; /* padding: 10px;*/ } #showPayTypes{ font-size: 20px; width: 700px; height: 50px; border:5px double #c38600; margin: 10px auto; border-radius: 8px; } .operators, .braces, .wrapIn{ border:1px solid rgba(70, 5, 26, 0.18); width: 9%; font-size: 25px; font-weight: bold; margin-top: 5px; margin-left: 6px; padding: 5px; display: inline-block; border-radius: 4px; text-align: center; } .block, .numbers{ border:1px solid blue; /* width: 40px; */ font-size: 30px; font-weight: bold; margin: 5px; padding: 5px; display: inline-block; border-radius: 25px; text-align: center; } #functions{ margin: 10px auto; height: 150px; width: 704px; border: 1px solid #ffffff; } button { font-size: 25px; height: 51px; color: #ffffff; background-color: black; margin-left: 27px; } #enterNum { width: 150px; height: 43px; font-size: 30px; margin-left: 9px; font-weight: bold; color: #610854; } #inputText{ margin-top: 35px; } #getFormula{ margin-top: 5px; } #wrapInBraces{ display: none; } 

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script type="text/javascript" src="Functions.js"></script> <link rel="stylesheet" type="text/css" href="Styles.css"> </head> <body> <div id="display" contentEditable="true"></div> <div id="input"> <form> </form> <label for="autofill">Pay Type:<input type="text" name="autofill" id="autofill" /></label> </div> <div id="showPayTypes"></div> <div id="operatorsBlock"> <span style="margin-left: 10px"> <span class="operators" id="add">+</span> <span class="operators" id="substract">-</span> <span class="operators" id="divide">/</span> <span class="operators" id="multiply">*</span> <span class="operators" id="percentage">%</span> <span class="braces">(</span> <span class="braces">)</span> <span class="wrapIn" title="Insert formula in Braces">("")</span> </span> </div> <div id="functions"> <div id="buttons"> <input type="number" id="enterNum" placeholder="numbers here"> <button id="saveFormula">Save Formula</button> <button id="getFormula">Get Formula</button> <button id="delete">Delete</button> </div> </div> </div> <!-- <span id="wrapInBraces"></span> --></body> </html> 

Answer 1

您不能提供相同的点击并期望两种不同的行为。

您可以实现此功能的一种途径是使大盒子中的元素可移动。 另一个路径是，当您在大框内单击时，将记住该坐标，在大框下方键入的目标将插入到要记住的点。