2011-10-28 11 views
8

入力中にこのmathjaxの例をライブプレビューに変更するにはどうすればよいですか?今すぐ私はenterを押した後に結果を表示するだけです。私はstackoverflow/math.stackexchangeが質問をタイプするときにプレビューを表示する方法と同様に動作するようにそれを微調整したいと思います。代わりにonchangeを使用してのリアルタイムで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のライブプレビューを表示するには、数式で質問/コメントを入力するための入力フィールドがあるワードプレスサイトではどうすればよいですか?絶対初心者のために、何かスクリプトがあれば、 "what"と "where"を入力してください。ありがとう – user12345

答えて

4

onkeypressまたはonkeyupしてみてください。

onchangeは、フィールドを離れるときにのみトリガーされますが、他の(明らかに)各キーストロークで発生します。

+0

MathJaxのライブプレビューを表示する最善の方法は、数式で質問/コメントを入力するための入力フィールドを持つWordPressサイトです。絶対初心者のために、何かスクリプトがあれば、 "what"と "where"を入力してください。ありがとう – user12345

1

あなたは、他のブラウザと同じくらい頻繁にまたは効率的にonchangeイベントを発生させないInternet Explorerを使用していると思われます。

MathJax Examplesのバージョンには、IEをよりよく処理するコードが含まれています。詳細については、ソースコードを参照してください。

+0

これは実際には事実ではありません。 – think123

関連する問題