How to focus the cursor between two brackets (parentheses) using jQuery?

Question

I have a calculator that works with buttons for assigning values. The basic idea is to generate formulas. Values ​​are easily added to enter. All brackets when entering the corresponding button, I need to continue to enter values ​​in parenthesis

Jquery

$(document).ready(function () { $("input:button").click(function () { valor = $(this).val(); actual = $("#ContentPlaceHolder1_formula").val(); if (valor == "C") { $("#ContentPlaceHolder1_formula").val(""); } else { if (valor == "=") { $("#ContentPlaceHolder1_formula").val(eval(actual)); } else { $("#ContentPlaceHolder1_formula").val(actual + valor); } } }); }); 

Html

  <div class="form-group"> <input class="btn" type="button" value="()" id="parentesis" /> <input class="btn" type="button" value="1" id="1" /> <input class="btn" type="button" value="2" id="2" /> <input class="btn" type="button" value="3" id="3" /> <input class="btn" type="button" value="+" id="sumar" /><br /> <input class="btn" type="button" value="4" id="4" /> <input class="btn" type="button" value="5" id="5" /> <input class="btn" type="button" value="6" id="6" /> <input class="btn" type="button" value="-" id="restar" /><br /> <input class="btn" type="button" value="7" id="7" /> <input class="btn" type="button" value="8" id="8" /> <input class="btn" type="button" value="9" id="9" /> <input class="btn" type="button" value="*" id="multiplicar" /><br /> <input class="btn" type="button" value="0" id="0" /> <input class="btn" type="button" value="=" id="igual" /> <input class="btn" type="button" value="C" id="C" /> <input class="btn" type="button" value="/" id="dividir" /> <asp:Button ID="btn_login" OnClick="docreateformula" CssClass="btn btn-primary btn-lg center-block" Text="Guardar" runat="server"/> </div> 

With this code, this will happen: 5+()3*()+5+3 and I need: 5+(3*(5+3))

How can i do this?

Answer 1

You use the following code to make it work

 function occurrences(string, subString, allowOverlapping) { string+=""; subString+=""; if(subString.length<=0) return string.length+1; var n=0, pos=0; var step=(allowOverlapping)?(1):(subString.length); while(true){ pos=string.indexOf(subString,pos); if(pos>=0){ n++; pos+=step; } else break; } return(n); } $("input:button").click(function () { valor = $(this).val(); actual = $("#ContentPlaceHolder1_formula").val(); if (valor == "C") { $("#ContentPlaceHolder1_formula").val(""); } else if(valor=="()") { var count1= occurrences(actual,'(',false); var count2= occurrences(actual,')',false); var count=count1+count2; if(count%2==0) { $("#ContentPlaceHolder1_formula").val(actual+"("); } else { $("#ContentPlaceHolder1_formula").val(actual+")"); } } else { if (valor == "=") { $("#ContentPlaceHolder1_formula").val(eval(actual)); } else { $("#ContentPlaceHolder1_formula").val(actual + valor); } } }); 

demo link: http://jsfiddle.net/asimshahiddIT/6hje7nvh/

Answer 2

You can do 2 ways.

You can separate the '(' from ')' button or you can try the following:

 if(valor=="()"){ for(i=0;i<actual.lenght;i++){ var aux = actual.IndexOf("(",i); if(aux){ var aux2 = actual.IndexOf(")"); if(aux2){ i=aux2-1; }else{ valor=")"; }else{ valor="("; } $("#ContentPlaceHolder1_formula").val(actual + valor); 

Answer 3

Create two buttons instead of one, one for ( and one for ) , and you won't have a problem.

Answer 4

You can do it like this:

 $(document).ready(function () { var opened=0; $("input:button").click(function () { valor = $(this).val(); actual = $("#ContentPlaceHolder1_formula").val(); if (valor == "C") { $("#ContentPlaceHolder1_formula").val(""); } else { if (valor == "=") { $("#ContentPlaceHolder1_formula").val(eval(actual)); } else { $("#ContentPlaceHolder1_formula").val(actual + valor); if(valor=="()") { input = $("#ContentPlaceHolder1_formula"); input[0].selectionStart = input[0].selectionEnd = input.val().length - 1; } } } }); 

});

Answer 5

you can use the '(' and ')' it would be better than '()' http://jsfiddle.net/mazin/7yj20umu/

  $(document).ready(function () { $("input:button").click(function () { valor=$(this).val(); actual = $('#btn_login').val(); if (valor == "C") { $('#btn_login').val(""); } else { if (valor == "=") { $('#btn_login').val(eval(actual)); } else { $('#btn_login').val(actual + valor); } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <input class="btn" type="button" value=")" id="parentesis" /> <input class="btn" type="button" value="(" id="parentesis" /> <input class="btn" type="button" value="1" id="1" /> <input class="btn" type="button" value="2" id="2" /> <input class="btn" type="button" value="3" id="3" /> <input class="btn" type="button" value="+" id="sumar" /><br /> <input class="btn" type="button" value="4" id="4" /> <input class="btn" type="button" value="5" id="5" /> <input class="btn" type="button" value="6" id="6" /> <input class="btn" type="button" value="-" id="restar" /><br /> <input class="btn" type="button" value="7" id="7" /> <input class="btn" type="button" value="8" id="8" /> <input class="btn" type="button" value="9" id="9" /> <input class="btn" type="button" value="*" id="multiplicar" /><br /> <input class="btn" type="button" value="0" id="0" /> <input class="btn" type="button" value="=" id="igual" /> <input class="btn" type="button" value="C" id="C" /> <input class="btn" type="button" value="/" id="dividir" /> <input ID="btn_login" type="text" OnClick="docreateformula" CssClass="btn btn-primary btn-lg center-block" Text="Guardar"/> </div> 

Answer 6

Just add a flag for the position of the insertion point. And do not forget to reset if necessary.

 $(document).ready(function () { var flag = 0; // the insert point $("input:button").click(function () { valor = $(this).val(); actual = $("#ContentPlaceHolder1_formula").val(); if (valor == "C") { $("#ContentPlaceHolder1_formula").val(""); flag = 0; // reset the flag } else if (valor == "=") { $("#ContentPlaceHolder1_formula").val(eval(actual)); flag = 0; // reset the flag } else { // split current valor at the insert point and concat with insertion $("#ContentPlaceHolder1_formula").val(actual.slice(0, flag) + valor + actual.slice(flag)); flag++; // increase flag by 1 } }); }); 

Answer 7

You do not want to put one button () on your calculator, because this prevents you from leaving the parentheses and continuing the formula. Just create two separate buttons ( and ) and maybe add some code to count the number of open brackets (to end the formula for the user automatically by pressing = and prevent adding ) when there is no open ( ).