使用MathJax渲染MathML时无法获取输入的解决方法求助

问题根源 #

MathJax在渲染MathML时，会将原始MathML结构转换为HTML/CSS（比如你使用的chtml输出格式），原始<input>元素会被重新创建或迁移到新DOM节点中。同时你的代码在DOMContentLoaded阶段就绑定了事件，但MathJax是异步加载渲染的，此时MathML还未被处理，导致后续操作的DOM元素并非用户实际交互的输入框，自然无法读取输入值或触发正确校验逻辑。

可行解决方案 #

1. 等待MathJax渲染完成后操作DOM：使用MathJax提供的typesetPromise方法，确保所有数学公式渲染完毕后，再获取输入框并绑定校验逻辑。
2. 保留自定义属性：MathJax会自动保留annotation-xml中HTML元素的自定义data-*属性，无需额外配置。
3. 调整事件绑定时机：将校验逻辑的初始化放在MathJax渲染完成的回调中，而非DOMContentLoaded。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Math Quiz</title>
    <script type="text/javascript" async src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <script>
      window.MathJax = {
        tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] },
        startup: {
          ready() {
            // 执行MathJax默认初始化逻辑
            MathJax.startup.defaultReady();
            // 等待所有公式渲染完成后初始化校验逻辑
            MathJax.typesetPromise().then(() => {
              initAnswerCheck();
            });
          }
        }
      };
    </script>
    <style>
    .input {
      width: 20px;
      text-align: center;
      font-family: Arial, sans-serif;
    }

    .red {
      background-color: darkred;
    }
    </style>
</head>
<body>
<math display="block" class="tml-display" style="display:block math;">
  <mrow>
    <msubsup>
      <mo movablelimits="false">∫</mo>
      <mn>2</mn>
      <mn>3</mn>
    </msubsup>
    <msup>
      <mi>x</mi>
      <mn>2</mn>
    </msup>
    <mo>=</mo>
    <mfrac>
      <mn><semantics>
        <annotation-xml encoding="application/xhtml+xml">
          <input xmlns="http://www.w3.org/1999/xhtml" type="text" maxlength="2" class="input" size="1" data-answer="19" value="" autocomplete="off" />
        </annotation-xml></semantics></mn>
      <mn><semantics>
        <annotation-xml encoding="application/xhtml+xml">
          <input xmlns="http://www.w3.org/1999/xhtml" type="text" maxlength="1" class="input" size="1" data-answer="3" value="" autocomplete="off" />
        </annotation-xml></semantics></mn>
    </mfrac>
  </mrow>
</math>

<br>
<button id="checkButton" style="margin-top: 10px;">Check Answers</button>
<div id="resultMessage" style="margin-top: 10px;"></div>

<script>
  function checkAnswer(element) {
    const inputValue = element.value.replace(/[^0-9-]/g, ''); 
    const correctAnswer = element.dataset.answer;

    const isCorrect = inputValue === correctAnswer;

    element.style.backgroundColor = ''; 
    if (!isCorrect) {
      element.style.backgroundColor = 'red'; 
    }

    return isCorrect;
  }

  function checkAllAnswers() {
    const inputFields = document.querySelectorAll('input[data-answer]');
    let allCorrect = true;

    inputFields.forEach(function (element) {
      if (!checkAnswer(element)) {
        allCorrect = false; 
      }
    });

    const resultMessage = document.getElementById('resultMessage');
    resultMessage.textContent = allCorrect
      ? 'All answers are correct!'
      : 'Some answers are incorrect. Please try again.';
  }

  function initAnswerCheck() {
    document.getElementById('checkButton').addEventListener('click', checkAllAnswers);
  }
</script>

</body>
</html>

代码说明 #

• 修改MathJax配置，通过startup.ready钩子在MathJax初始化完成后，等待所有公式渲染完毕再调用initAnswerCheck绑定按钮点击事件。
• 提取校验逻辑函数，确保在正确时机绑定事件，此时获取的输入框是MathJax渲染后的真实交互元素。
• 保留原有输入值处理、答案校验和样式反馈逻辑，无需修改核心校验逻辑。

内容的提问来源于stack exchange，提问作者Therizinosaurus cheloniformis