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

admin管理员组

文章数量:1328015

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?

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?

• javascript
• jquery
• html
• calculator

Share Improve this question Follow edited Nov 20, 2014 at 20:51 TuGordoBello asked Nov 20, 2014 at 16:34 TuGordoBelloTuGordoBello 4,51099 gold badges5757 silver badges8888 bronze badges 2

• 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 ().

本文标签： javascriptHow to focus cursor in between two brackets (parentheses) with JqueryStack Overflow