Mathquill输入字段消失的占位符

如何解决Mathquill输入字段消失的占位符

编辑：我已经解决了这个问题。对于遇到类似问题的任何人，我都将解决方案发布在此页面的底部。

问题

我正在制作一个使用Mathquill进行数学渲染的Web应用程序。我的想法是要有一个输入字段，以便用户输入，就像这样：

然后，占位符消失，以便用户可以在其中写入内容，如下所示：

仅在用户单击之前显示占位符。为此，我需要检查用户之前是否单击过。

当前，这是我写的：

<!DOCTYPE html>
<html lang="en">

<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>mathquill</title>
    <link rel="stylesheet" href="assets/mathquill.css" />
    <link rel="stylesheet" href="main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="assets/mathquill.js"></script>
</head>

<body>
    <p class="math-field">
        <span id="answer">
            \text{Click here and type in your equation...}
        </span>
    </p>

    <script src="index.js"></script>
</body>

</html>

这是javascript：

var MQ = mathquill.getInterface(2); // Loads UI
var answerSpan = document.getElementById('answer');
var answerMathField = MQ.MathField(answerSpan,{
    handlers: {
        edit: function () {

        }
    }
});

var countClicks = 0;

answerSpan.onclick = function () {
    countClicks = countClicks + 1;
    if (countClicks > 2) {
        answerSpan.onclick = function () {
            answerMathField.movetoRightEnd();
        };
    
    } else {
        answerSpan.onclick = function () {
            answerMathField.select(); //highlight placeholder text
            answerMathField.keystroke("Del"); // delete placeholder
        };
    }
};

但是由于某些原因，它会不断删除数学字段的内容-即使没有占位符。

如果我这样检查countClicks的值：

document.addEventListener('click',function () {
  console.log(countClicks + " clicks")
});

无论我单击多少次，它始终返回1。有什么原因会发生这种情况？帮助将不胜感激。

解决方案

JavaScript的问题是我调用了onclick()五次，导致函数重复：

首次点击

answerSpan.onclick = function () {
    countClicks = countClicks + 1;
}

第二次点击

answerSpan.onclick = function () {
            answerMathField.movetoRightEnd();
        };

因此，浏览器不知道要执行哪个操作，因此按时间顺序排列每个onClick。这就是console.log(countClicks + " clicks")每次都返回相同值的原因。

要解决此问题，我们必须消除嵌套函数中的onClick。我们剩下了：

var countClicks = 0;

answerSpan.onclick = function () {
    countClicks = countClicks + 1;

    if (countClicks > 1) {

        answerMathField.movetoRightEnd();

    } else {

        answerMathField.select(); //highlight placeholder text
        answerMathField.keystroke("Del"); // delete placeholder
        
    }
};

工作无懈可击。