有没有办法在按下按钮时继续聚焦 MathQuill 输入？

Question

我正在使用带有按钮的 Desmos fork for MathQuill 来输入符号：

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>

（没有我可以用于 Desmos 分支的 CDN，但是 MathQuill 的两个版本都存在这种行为）

当我在桌面上按下左括号符号时，数学字段暂时失去焦点，然后插入左括号。右括号接近“幽灵”。但是当我按下右括号符号时，数学字段再次失去焦点，“幽灵”变成实心，因此右括号被插入到里面，产生两组括号 - 一组在另一组内 - 当只有一个预期时。

有没有办法在单击按钮时应用焦点样式，例如 the Desmos website does？

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>

有没有办法在按下按钮时继续聚焦 MathQuill 输入？

Is there a way to continue focusing a MathQuill input when a button is pressed?

html

javascript

mathquill