Estoy usando la bifurcación Desmos para MathQuill con botones para ingresar símbolos:
var MQ = MathQuill.getInterface(2); var answerSpan = document.getElementById("input"); var answerMathField = MQ.MathField(answerSpan); document.getElementById("keypad-left-parenthesis").onclick = function () { answerMathField.focus(); answerMathField.cmd("("); }; document.getElementById("keypad-right-parenthesis").onclick = function () { answerMathField.focus(); answerMathField.cmd(")"); }; body { font-size: 32px; margin: 1em; } .mq-editable-field { margin: 1em 0; } button { width: 2em; height: 2em; } <link href="https://cdn.jsdelivr.net/npm/mathquill@0.10.1-a/build/mathquill.css" rel="stylesheet"> <div id="input"></div> <div><button id="keypad-left-parenthesis">(</button><button id="keypad-right-parenthesis">)</button></div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mathquill@0.10.1-a/build/mathquill.min.js"></script>(No hay un CDN que pueda usar para la bifurcación Desmos, pero este comportamiento existe para ambas versiones de MathQuill)
Cuando presiono el símbolo del paréntesis izquierdo en el escritorio, el campo matemático pierde el foco temporalmente y luego se inserta el paréntesis izquierdo. Un paréntesis derecho se acerca como un "fantasma". Pero cuando presiono el símbolo del paréntesis derecho, el campo matemático vuelve a perder el foco, el "fantasma" se vuelve sólido y, por lo tanto, el paréntesis derecho se inserta dentro, produciendo dos grupos de paréntesis, uno dentro del otro, cuando solo se pretendía uno.
¿Hay alguna manera de aplicar el estilo de enfoque incluso cuando se hace clic en el botón, como lo hace el sitio web de Desmos ?
El evento onclick que está utilizando no puede evitar la pérdida de enfoque.
Una forma de solucionar el problema es usar onmousedown en lugar de onclick
Esto no debería cambiar el comportamiento, pero nos permite usar event.preventDefault() para mantener el enfoque en la entrada.
Entonces el botón se vería así:
document.getElementById("keypad-left-parenthesis").onmousedown = function () { event.preventDefault(); answerMathField.cmd("("); };Fragmento actualizado:
var MQ = MathQuill.getInterface(2); var answerSpan = document.getElementById("input"); var answerMathField = MQ.MathField(answerSpan); document.getElementById("keypad-left-parenthesis").onmousedown = function () { event.preventDefault(); answerMathField.cmd("("); }; document.getElementById("keypad-right-parenthesis").onmousedown = function () { event.preventDefault(); answerMathField.cmd(")"); }; body { font-size: 32px; margin: 1em; } .mq-editable-field { margin: 1em 0; } button { width: 2em; height: 2em; } <link href="https://cdn.jsdelivr.net/npm/mathquill@0.10.1-a/build/mathquill.css" rel="stylesheet"> <div id="input"></div> <div><button id="keypad-left-parenthesis">(</button><button id="keypad-right-parenthesis">)</button></div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mathquill@0.10.1-a/build/mathquill.min.js"></script>