2011-10-28 11 views
8

Comment modifier cet exemple mathjax pour prévisualiser en cours de saisie? À l'heure actuelle, il affiche uniquement le résultat après avoir appuyé sur Entrée. Je voudrais le modifier pour qu'il fonctionne de la même manière que stackoverflow/math.stackexchange affiche l'aperçu lorsque vous tapez une question.Afficher la sortie mathjax en temps réel

<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

ouais, car 'onchange' ne se déclenche que lorsque la touche d'entrée est enfoncée ou lorsque le champ est flou. – think123

+0

Note du futur: cdn.mathjax.org approche de sa fin de vie, consultez https://www.mathjax.org/cdn-shutting-down/ pour des conseils de migration. –

+0

@PeterKrautzberger Quelle est la meilleure façon de montrer l'aperçu en direct de MathJax dans un site wordpress qui a un champ de saisie pour écrire des questions/commentaires avec des formules mathématiques. Pour un débutant absolu, veuillez guider "quoi" et "où" pour taper un script, le cas échéant. Merci – user12345

Répondre

4

Au lieu d'utiliser onchange essayer onkeypress ou onkeyup.

onchange est seulement déclenchée lorsque vous quittez le champ, mais les autres (évidemment) se produisent à chaque coup de clé.

+0

Quelle est la meilleure façon de montrer l'aperçu en direct de MathJax dans un site wordpress qui a un champ de saisie pour écrire des questions/commentaires avec des formules mathématiques. Pour un débutant absolu, veuillez guider "quoi" et "où" pour taper un script, le cas échéant. Merci – user12345

1

Je suppose que vous utilisez Internet Explorer, qui ne déclenche pas les événements onchange aussi souvent ou efficacement que les autres navigateurs.

La version dans le MathJax Examples inclut plus de code pour gérer IE mieux. Vous pourriez vouloir regarder le code source là pour plus de détails.

+0

ce n'est pas réellement vrai, en fait. – think123