Can't using with input text elements

[phuongntit]

[emanuel1025]

Same issue here. Any updates?

[laughinghan]

what?

[laughinghan]

MathQuill can't convert a replaced element like an <input>, it has to be a normal element like a <span>, <div>, <p>, etc.

If you need the <input> so that you'll degrade gracefully in the absence of JavaScript, you can do:

<span class="mathquill-editable">
  <input type="text"/>
</span>
<script>
  var MQ = MathQuill.getInterface(2);
  $('.mathquill-editable').each(function() {
    MQ.MathField(this);
  });
</script>

Note that old versions of MathQuill would auto-convert anything with the class mathquill-editable, but it turns out there's no good contract on when that would happen so things would get converted twice or not at all. Today, you have to manually (at a time of your choosing) find all .mathquill-editables (or any other classname you wish) and use the MathQuill JS API to convert them.

[emanuel1025]

Would be useful if this were present as a note in the MathField documentation. Currently using MathField using a vanilla input element renders a non-editable textbox.

I'm using AngularJS and it's ngModel directive is not compatible with non-editable fields such as <span>

[MathQuillBot]

laughinghan (via Slack):

If I'm understanding you right, that is far from the only problem with using MathQuill in that way. Even if MathQuill swapped out the <input> for a math field, how would Angular know when you typed in it and stuff, for the two-way binding? You're going to have to implement the two way binding between Angular and MathQuill manually

[emanuel1025]

Just tested it and it looks like you're right. Haha, that's what I was doing yesterday. Thanks for your time.