0
我试图在下面的图像中插入travelAllowance在“+”和“basic”之间，而不删除现有的符号。当我点击另一个div时，在插入符号处添加一个满度插入符号
完整的代码如下。我搜索了整个互联网，但无法找到答案。
$(document).ready(function(){
\t debugger;
\t $("#display").html("");
\t var formula = "";
\t var data = [
\t \t \t \t "BasicPay ",
\t \t \t \t "OverTime ",
\t \t \t \t "TravelAllowance ",
\t \t \t \t "DearnessAllowance ",
\t \t \t \t "FoodAllowance ",
\t \t \t \t "providentFund "
\t \t \t ];
$("#autofill").autocomplete({
source:data,
autoFocus: true ,
\t \t select: function(event, ui) {
\t debugger;
\t \t $("#display").append("<span class='block' contentEditable='false'>" + ui.item.value + "</span>");
\t \t $("input[name='autofill']").val("");
\t \t \t \t \t \t return false; \t \t
\t \t \t \t \t \t \t \t }
\t }); \t \t
\t $("#showPayTypes").html("Allowed Pay Types are : " + data.toString()); \t \t
\t $(".operators").click(function(){
\t \t debugger;
\t \t var selectedOperator = $(this).html();
\t \t $("#display").append("<span contentEditable='false' class='block'>" + selectedOperator + " " + "</span>");
\t });
\t $("#delete").click(function(){
\t \t debugger;
\t \t if ($("#display span").first().attr('class') == "noClass") {
\t \t var yourString = $.trim($("#display").text());
\t \t var result = yourString.substring(1, yourString.length-1);
\t \t var formulaArray = result.split(" ");
\t \t formulaArray.forEach(main);
\t \t function main(arrayItem, index, array) {
\t \t \t debugger;
\t \t \t var regExForOnlyNum = RegExp(/^\d+$/).test(arrayItem);
\t \t \t if (regExForOnlyNum == true) {
\t \t \t \t var bracesSpanObj = "<span contentEditable='false' class='numbers'>" + arrayItem+ " " + "</span>";
\t \t \t \t formulaArray[index] = bracesSpanObj;
\t \t \t }else
\t \t \t if (arrayItem == '(' || arrayItem == ')') {
\t \t \t \t var bracesSpanObj = "<span contentEditable='false'>" + arrayItem+ " " + "</span>";
\t \t \t \t formulaArray[index] = bracesSpanObj;
\t \t \t }
\t \t \t else
\t \t \t if (arrayItem != "") {
\t \t var spanObj = "<span contentEditable='false' class='block'>" + arrayItem+ " " + "</span>";
\t \t formulaArray[index] = spanObj;
\t \t \t }else{
\t \t \t \t $(this).remove();
\t \t \t };
\t \t }
\t \t $("#display").html(formulaArray);
\t \t /*$("#display").html(result);*/
\t \t /*var result = yourString.slice(1, -1);*/
\t \t /*$("#display span").first().remove();*/
\t \t }else{
\t \t $("#display span").last().remove();
\t }
\t });
\t $("#enterNum").keypress(function(e){
\t \t if (e.which == 13) {
\t \t \t debugger;
\t \t \t var text = $("#enterNum").val();
\t \t \t if (text != "") {
\t \t \t $("#display").append("<span contentEditable='false' class='numbers'>"+ text + " " + "</span>");
\t \t \t /*onclick = 'makeItEdit()'*/
\t \t \t $("#enterNum").val("");
\t \t \t \t }else{
\t \t \t \t \t alert("please enter some value....")
\t \t \t \t \t return false;
\t \t \t \t };
\t \t \t \t \t }
\t });
\t $(".numbers").bind
\t $(".braces").click(function(){
\t \t debugger;
\t \t var value= $(this).html();
\t \t $("#display").append("<span contentEditable='false'>" + value + " " + "</span>");
\t });
\t $(".wrapIn").click(function(){
\t \t debugger;
\t \t $("#display").html("<span contentEditable='false' class='noClass'>(" + $("#display").html() + ") "+ "</span>");
\t });
\t $("#saveFormula").click(function(){
\t \t debugger;
\t \t var formulaForValidation = $.trim($("#display").text());
\t \t alert("the formula created by u is ==" + formulaForValidation);
\t \t var operatorsAtTheEnd = RegExp(/^[a-zA-Z0-9(]+(.*[a-zA-Z0-9%)])*$/).test(formulaForValidation);
\t \t if (operatorsAtTheEnd == true) {
\t \t formula = $("#display").text();
\t \t console.log(formula);
\t \t $("#display").html("");
\t \t }else{
\t \t \t alert("unfortunately the format you entered is incorrect");
\t \t \t return false;
\t \t }; \t
\t });
$("#getFormula").click(function(){
\t \t debugger;
\t \t alert("formula received from server=="+"'"+formula+"'");
\t \t var formulaArray = formula.split(" ");
\t \t formulaArray.forEach(main);
\t \t function main(arrayItem, index, array) {
\t \t \t debugger;
\t \t \t if (arrayItem == '(' || arrayItem == ')') {
\t \t \t \t var bracesSpanObj = "<span contentEditable='false'>" + arrayItem+ " " + "</span>";
\t \t \t \t formulaArray[index] = bracesSpanObj;
\t \t \t }
\t \t \t else
\t \t \t if (arrayItem != "") {
\t \t var spanObj = "<span contentEditable='false' class='block'>" + arrayItem+ " " + "</span>";
\t \t formulaArray[index] = spanObj;
\t \t \t }else{
\t \t \t \t $(this).remove();
\t \t \t };
\t \t }
\t \t debugger;
\t \t console.log("formulaArray ===== " +formulaArray);
\t \t $("#display").html(formulaArray);
\t });
\t /*function makeItEdit(){
\t \t debugger;
\t $(".numbers").attr('contentEditable', true);
\t }
*/
$("#display").click(function(e) {
\t debugger;
var target = $(e.target), article;
\t if(target.is('.numbers')) {
\t $(".numbers").attr('contentEditable', true);
return false;
} else {
\t $(".numbers").attr('contentEditable', false);
\t return false;
}
\t })
});#display{
\t padding: 5px;
\t border:5px double #c38600;
\t width: 682px;
\t min-height: 110px;
\t margin: 10px auto;
\t font-weight: bold;
\t font-size: 50px;
\t border-radius: 15px;
\t color: #abcdef;
\t outline: none;
}
#input{
\t border: 1 px solid white;
\t width: 701px;
\t min-height: 50px;
\t margin: 5px auto;
}
#autofill{
\t width: 500px;
\t margin-left: 10PX;
\t padding: 2px;
\t padding-left: 10px;
\t border: none;
\t border-bottom: 1px solid green;
\t font-size: 30px;
\t color: #864566;
}
#autofill:focus{
\t border: none;
\t border-bottom: 1px solid green;
\t outline: none;
}
label{
\t font-size: 30px;
\t color: #864566;
}
#operatorsBlock{
\t width: 701px;
\t height: 50px;
\t border:5px double #c38600;
\t margin: 5px auto;
\t border-radius: 8px;
/* \t padding: 10px;*/
}
#showPayTypes{
\t font-size: 20px;
\t width: 700px;
\t height: 50px;
\t border:5px double #c38600;
\t margin: 10px auto;
\t border-radius: 8px;
}
.operators, .braces, .wrapIn{
\t border:1px solid rgba(70, 5, 26, 0.18);
\t width: 9%;
\t font-size: 25px;
\t font-weight: bold;
\t margin-top: 5px;
\t margin-left: 6px;
\t padding: 5px;
\t display: inline-block;
\t border-radius: 4px;
\t text-align: center;
}
.block, .numbers{
\t border:1px solid blue;
/* \t width: 40px;
*/ \t font-size: 30px;
\t font-weight: bold;
\t margin: 5px;
\t padding: 5px;
\t display: inline-block;
\t border-radius: 25px;
\t 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{
\t margin-top: 35px;
}
#getFormula{
\t margin-top: 5px;
}
#wrapInBraces{
\t 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">
\t <form>
\t \t
\t </form>
\t \t <label for="autofill">Pay Type:<input type="text" name="autofill" id="autofill" /></label>
</div>
<div id="showPayTypes"></div>
<div id="operatorsBlock">
\t <span style="margin-left: 10px">
\t \t <span class="operators" id="add">+</span>
\t \t <span class="operators" id="substract">-</span>
\t \t <span class="operators" id="divide">/</span>
\t \t <span class="operators" id="multiply">*</span>
\t \t <span class="operators" id="percentage">%</span>
\t \t <span class="braces">(</span>
\t \t <span class="braces">)</span>
\t \t <span class="wrapIn" title="Insert formula in Braces">("")</span>
\t </span>
</div>
<div id="functions">
\t <div id="buttons">
\t \t <input type="number" id="enterNum" placeholder="numbers here">
\t \t <button id="saveFormula">Save Formula</button>
\t \t <button id="getFormula">Get Formula</button>
\t \t <button id="delete">Delete</button>
\t \t </div>
\t </div>
</div>
<!-- <span id="wrapInBraces"></span>
--></body>
</html>
我不清楚你到底想要做什么或什么不工作。 –
@http：//stackoverflow.com/users/5837056/robert-m ::我想追加旅游津贴在光标位置contenteditable div –