Geek Answers Handbook

Display mathjax output in real time

How do I modify this mathjax example to preview during input? Now it displays the result only after I hit enter. I would like to configure it so that it works the same way as stackoverflow / math.stackexchange shows a preview when entering 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>
+8
javascript jquery mathjax
source share
2 answers

Instead of using onchange try onkeypress or onkeyup .

onchange only starts when you exit the field, but others (obviously) happen with every keystroke.

+4
source share

I suspect you are using Internet Explorer, which does not onchange events as often or efficiently as other browsers.

The version in MathJax Examples contains more code to better manage IE. You can see the source code there for details.

+1
source share

More articles:


All Articles