实时显示 mathjax 输出答案

【问题标题】：Display mathjax output in realtime实时显示 mathjax 输出
【发布时间】：2011-12-17 01:24:40
【问题描述】：

如何在我输入时修改这个 mathjax 示例以实时预览？现在它只在我按下回车后显示结果。我想对其进行调整，使其类似于 stackoverflow/math.stackexchange 在键入问题时显示预览的方式。

<html>
<head>
<title>MathJax Dynamic Math Test Page</title>

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [["$","$"],["\\(","\\)"]]
    }
  });
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full">
</script>

</head>
<body>

<script>
  //
  //  Use a closure to hide the local variables from the
  //  global namespace
  //
  (function () {
    var QUEUE = MathJax.Hub.queue;  // shorthand for the queue
    var math = null;                // the element jax for the math output.

    //
    //  Get the element jax when MathJax has produced it.
    //
    QUEUE.Push(function () {
      math = MathJax.Hub.getAllJax("MathOutput")[0];
    });

    //
    //  The onchange event handler that typesets the
    //  math entered by the user
    //
    window.UpdateMath = function (TeX) {
      QUEUE.Push(["Text",math,"\\displaystyle{"+TeX+"}"]);
    }
  })();
</script>

Type some TeX code:
<input id="MathInput" size="50" onchange="UpdateMath(this.value)" />
<p>

<div id="MathOutput">
You typed: ${}$
</div>

</body>
</html>

【问题讨论】：

是的，因为onchange 仅在按下回车键或字段模糊时触发。
未来注意事项：cdn.mathjax.org 即将结束生命周期，请查看mathjax.org/cdn-shutting-down 了解迁移提示。
@PeterKrautzberger 什么是在 wordpress 站点中显示 MathJax 实时预览的最佳方式，该站点具有用于编写带有数学公式的问题/cmets 的输入字段。对于绝对初学者，请指导“什么”和“在哪里”键入一些脚本，如果有的话。谢谢
@think123 在 wordpress 站点中显示 MathJax 实时预览的最佳方式是什么，该站点具有用于编写带有数学公式的问题/cmets 的输入字段。对于绝对初学者，请指导“什么”和“在哪里”键入一些脚本，如果有的话。谢谢

标签： javascript jquery mathjax

【解决方案1】：

不要使用onchange，试试onkeypress 或onkeyup。

onchange 仅在您离开该字段时触发，但其他（显然）在每次击键时发生。

【讨论】：

在 wordpress 站点中显示 MathJax 实时预览的最佳方式是什么，该站点具有用于编写带有数学公式的问题/cmets 的输入字段。对于绝对初学者，请指导“什么”和“在哪里”键入一些脚本，如果有的话。谢谢

【解决方案2】：

我怀疑您使用的是 Internet Explorer，它不会像其他浏览器那样频繁或有效地触发 onchange 事件。

MathJax Examples 中的版本包含更多代码以更好地处理 IE。您可能想查看那里的源代码以了解详细信息。

【讨论】：

这不是真的，事实上。

【解决方案3】：

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [ ['$','$'], ["\\(","\\)"] ],processEscapes: true}});
</script>

<script
  type="text/javascript"
  charset="utf-8"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

<script>
function f() {
  var input = document.getElementById("input");
  document.getElementById("output").innerHTML = input.value;
  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  }
</script>

<textarea id="input" cols="25" rows="5" onkeyup="f()">
</textarea>

<p id="output"></p>

【讨论】：