Can't get MathField to work on a very basic example
wqferr opened this issue · comments
The following code produces a text field that is not selectable with the mouse, only through "tab"bing. No latex symbols are rendered, I cannot delete any characters inside it. As far as I'm aware, I followed the loading instructions properly.
I am using FireFox 123.0 (64-bit) primarily, but the same behavior occurs in Chrome 122.0.6261.95 (Official Build) (64-bit), both on Windows 11.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="mathquill-0.10.1/mathquill.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="mathquill-0.10.1/mathquill.js"></script>
</head>
<body>
<input type="text" name="func" id="func" />
<script>
var MQ = MathQuill.getInterface(2);
let tf = document.getElementById("func");
MQ.MathField(tf);
</script>
</body>
</html>
Hello! Looks like you are using which will not work since the MathQuill render will be a bunch of smaller nested elements so you have to use instead like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.js"></script>
</head>
<body>
<span id="func"></span>
<script>
var MQ = MathQuill.getInterface(2);
let tf = document.getElementById("func");
MQ.MathField(tf);
</script>
</body>
</html>I am using the CDN for the mathquill JS and CSS but if you want to locally load them, make sure the path is all good!
My code was tested on:
- Arch Linux LTS Kernel
- Google Chrome 123.0.6312.105 and Web browser on Gnome Shell 46.0