2011-10-28 95 views
8

如何在輸入時修改此mathjax示例以進行實時預覽?現在它只在按下輸入後顯示結果。我想調整它,使其工作方式類似於輸入問題時,stackoverflow/math.stackexchange如何顯示預覽。實時顯示mathjax輸出

<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

是的,因爲'onchange'只有在按下回車鍵或當場模糊時纔會觸發。 – think123

+0

未來的注意事項:cdn.mathjax.org即將到期,請查看https://www.mathjax.org/cdn-shutting-down/獲取遷移提示。 –

+0

@PeterKrautzberger什麼是最好的方式來顯示MathJax的實時預覽在一個wordpress網站有輸入字段用數學公式編寫問題/評論。對於絕對的初學者,請指導「what」和「where」鍵入一些腳本,如果有的話。謝謝 – user12345

回答

4

而不是使用onchange的嘗試onkeypressonkeyup

onchange只會在您離開字段時觸發,但其他字符(顯然)會在每個關鍵筆劃發生時觸發。

+0

什麼是在wordpress網站上顯示MathJax實時預覽的最佳方式,該網站具有用數學公式編寫問題/評論的輸入字段。對於絕對的初學者,請指導「what」和「where」鍵入一些腳本,如果有的話。感謝 – user12345

1

我懷疑你正在使用Internet Explorer,它不像其他瀏覽器那樣經常或有效地觸發onchange事件。

MathJax Examples中的版本包含更多用於更好地處理IE的代碼。有關詳細信息,您可能想查看源代碼。

+0

這實際上並不是真的。 – think123