0
"+"と "basic"の間にtravelAllowanceを挿入しようとしています。別のdivをクリックすると、contenteditable 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 –