当按下按钮时，是否有继续聚焦MathQuill输入的方法？

Question

我使用带有按钮的用于MathQuill的Desmos叉来输入符号：

​

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>

​

(我无法使用CDN来处理Desmos叉，但是这种行为在两个版本的MathQuill中都存在)

当我按下桌面上的左括号符号时，数学字段暂时失去焦点，然后插入左括号。右括号以“鬼”的形式出现。但是当我按右括号符号时，数学字段又失去了焦点，“幽灵”变成了固体，因此右括号被插入，产生了两组括号--一组在另一组中--而只有一组是有意的。

是否有一种方法可以在单击按钮时应用焦点样式，如Desmos网站

Answer 1

您使用的onclick事件不能防止焦点丢失。

解决此问题的一种方法是使用onmousedown而不是onclick

这不应该改变行为，而是允许我们使用event.preventDefault()来保持对输入的关注。

所以这个按钮看起来是：

document.getElementById("keypad-left-parenthesis").onmousedown = function () {
    event.preventDefault();
    answerMathField.cmd("(");
};

更新片段：

​

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>

​