当我点击另一个div时，在插入符号中添加一个跨度

Question

我试图在“+”和“basic”之间插入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

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

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