如何使用 Jquery 将光标聚焦在两个括号（括号）之间？
Posted
技术标签:
【中文标题】如何使用 Jquery 将光标聚焦在两个括号（括号）之间？【英文标题】：How to focus cursor in between two brackets (parentheses) with Jquery? 【发布时间】：2015-01-18 14:53:01 【问题描述】：我有一个计算器，它使用按钮来分配值。主要思想是生成公式。这些值被无缝地添加到“输入”中。输入各自按钮时的所有括号，我需要发生的是在括号中继续输入值
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>
使用该代码会发生这种情况：
5+()3*()+5+3
我需要：
5+(3*(5+3))
我该怎么做？
【问题讨论】：
嘿，你能把它扔进 jsfiddle 吗？ 也许尝试更改问题标题。你问的是字符串操作，而不是光标和/或焦点。 【参考方案1】：您使用以下代码使其工作
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);
);
演示链接：http://jsfiddle.net/asimshahiddIT/6hje7nvh/
【讨论】：
【参考方案2】：你可以做两种方式。
可以将'('按钮与')'分开，或者你可以试试这个：
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);
【讨论】：
【参考方案3】：创建两个按钮而不是一个，一个用于(，一个用于)，您不会有任何问题。
【讨论】：
【参考方案4】：你可以这样做
$(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;
);
);
【讨论】：
【参考方案5】：你可以使用 '(' 和 ')' 它比 '()' 更好 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>【讨论】：
【参考方案6】：只需为插入点位置添加一个标志。并且不要忘记在必要时重置它。
$(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
);
);
【讨论】：
【参考方案7】：您不想在计算器上放置一个 () 按钮，因为这会阻止您离开括号并继续计算公式。只需创建两个单独的按钮 ( 和 ) 并可能添加一些代码来计算打开括号的数量（以在按下 = 时自动为用户完成公式并防止在没有打开时添加 ) ()。
【讨论】：
以上是关于如何使用 Jquery 将光标聚焦在两个括号（括号）之间？的主要内容，如果未能解决你的问题，请参考以下文章
Gym 240084E - Correct Bracket Sequence Editor - [线段树]