Virtual Math Keyboard with MathQuill

index.html

<p>Type math here: <span id="math-field"></span></p>
<div id="keyboard">
  <div class="btn-group" role="group" aria-label="math functions">
    <button type="button" class="btn btn-default" onClick='input("\\sqrt")'>√</button>
    <button type="button" class="btn btn-default" onClick= 'input("\\sin")'>sin</button>
    <button type="button" class="btn btn-default" onClick='input("\\cos")'>cos</button>
    <button type="button" class="btn btn-default" onClick='input("\\tan")'>tan</button>
    <button type="button" class="btn btn-default" onClick='input("/")'>/</button>
    <button type="button" class="btn btn-default" onClick='input("\Pi")'>Pi</button>
    <button type="button" class="btn btn-default" onClick='input("\dagger")'>Dagger</button>
    
  </div>
</div>

script.js

var mathFieldSpan = document.getElementById('math-field');
var MQ = MathQuill.getInterface(2);
var mathField = MQ.MathField(mathFieldSpan, {
  spaceBehavesLikeTab: true,
  handlers: {
    edit: function() {
      mathField.focus();
    }
  }
});

function input(str) {
  mathField.cmd(str);
  mathField.focus();
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://mathquill.com/lib/mathquill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.js"></script>

style.scss

p {
  margin-top: 40px;
}
#math-field {
  width: 500px;
}

styles

<link href="http://mathquill.com/lib/mathquill.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.css" rel="stylesheet" />

virtual-math-keyboard-with-mathquill.markdown

Virtual Math Keyboard with MathQuill

A Pen by Shaker Hamdi on CodePen.

License.