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 t

Solution 1:

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.

Solution 2:

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.

Solution 3:

<scripttype="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [ ['$','$'], ["\\(","\\)"] ],processEscapes: true}});
</script><scripttype="text/javascript"charset="utf-8"src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><script>functionf() {
  var input = document.getElementById("input");
  document.getElementById("output").innerHTML = input.value;
  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  }
</script><textareaid="input"cols="25"rows="5"onkeyup="f()"></textarea><pid="output"></p>