2011-10-28 24 views
8

¿Cómo modifico este ejemplo de mathjax en la vista previa en vivo mientras escribo? En este momento solo muestra el resultado después de haber presionado enter. Me gustaría ajustarlo para que funcione de manera similar a cómo stackoverflow/math.stackexchange muestra la vista previa al escribir una pregunta.Visualizar la salida mathjax en tiempo real

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

sí, porque 'onchange' solo se dispara cuando se presiona la tecla enter o cuando el campo está borroso. – think123

+0

Nota del futuro: cdn.mathjax.org está llegando al final de su vida útil, consulte https://www.mathjax.org/cdn-shutting-down/ para obtener sugerencias sobre migración. –

+0

@PeterKrautzberger ¿Cuál es la mejor manera de mostrar la vista previa en vivo de MathJax en un sitio de wordpress que tiene campo de entrada para escribir preguntas/comentarios con fórmulas matemáticas. Para principiantes absolutos, por favor guíe "qué" y "dónde" escriba algún script, si corresponde. Gracias – user12345

Respuesta

4

En lugar de utilizar onchange tratar o onkeypressonkeyup.

onchange solo se activa cuando sale del campo, pero los demás (obviamente) se producen con cada golpe de tecla.

+0

¿Cuál es la mejor manera de mostrar vista previa en vivo de MathJax en un sitio de wordpress que tiene campo de entrada para escribir preguntas/comentarios con fórmulas matemáticas. Para principiantes absolutos, por favor guíe "qué" y "dónde" escriba algún script, si corresponde. Gracias – user12345

1

Sospecho que está utilizando Internet Explorer, que no activa los eventos onchange tan a menudo o de manera eficiente como otros navegadores.

La versión en el MathJax Examples incluye más código para manejar IE mejor. Es posible que desee ver el código fuente allí para más detalles.

+0

esto no es realmente cierto, de hecho. – think123