Display mathjax output in realtime

How do I modify this mathjax example to live preview while I type? Right now it only displays result after I have pressed enter. I would like to tweak it so that it works similar to how stackoverflow/math.stackexchange shows the preview when typing a question.

<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>

Instead of using onchange try onkeypress or onkeyup.

onchange is only triggered when you leave the field, but the others (obviously) happen with each key-stroke.

Davide Cervone

I suspect you are using Internet Explorer, which doesn't fire onchange events as often or efficiently as other browsers.

The version in the MathJax Examples includes more code to handle IE better. You might want to look at the source code there for details.

来源：https://stackoverflow.com/questions/7925622/display-mathjax-output-in-realtime

标签

javascript

jquery

mathjax