javascript - How to focus cursor in between two brackets (parentheses) with Jquery?

I have a calculator that works with buttons to assign values. The main idea is to generate formulas. The values are added seamlessly into an "input". All the brackets when entering your respective button, I need to happen is to continue entering values in the 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 that code this happen: 5+()3*()+5+3 and I need: 5+(3*(5+3))

How can I do that?

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 that code this happen: 5+()3*()+5+3 and I need: 5+(3*(5+3))

How can I do that?

Share Improve this question edited Nov 20, 2014 at 20:51 asked Nov 20, 2014 at 16:34 TuGordoBello 4,5109 gold badges57 silver badges88 bronze badges

6 Hey, could you throw that into a jsfiddle? – Phil Tune Commented Nov 20, 2014 at 20:54
1 Maybe try changing the question title. You're asking about string operations, not about cursor and/or focus. – hon2a Commented Nov 26, 2014 at 11:02

Add a ment |

7 Answers 7

Sorted by: Reset to default 2 +50

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/asimshahiddIT/6hje7nvh/

You can do 2 ways.

Can separate the '(' button from ')' or you can try this:

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);

Create two buttons instead of one, one for ( and one for ) and you will have no problem.

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;
                }
            }
        }
    });

});

you can use '(' and ')' it be better than '()' http://jsfiddle/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./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>

Simply add a flag for the insert point position. And don't forget to reset it when 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
        }
    });
});

You don't want to put a single () 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 for counting the number of open parentheses (to finish the formula for the user automatically when pressing = and to prevent adding ) when there is no open ().

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to focus cursor in between two brackets (parentheses) with Jquery? - Stack Overflow

7 Answers 7