0

I am trying to pass keyboard events to a special class of HTML element (mathquill span). (Key presses get caught at a higher level, so I have to spoon-feed them down.) The standard way of doing this seems to be with jQuery's .trigger, as proposed in this previous question. However, that solution does absolutely nothing on my end. I cannot for the life of me find what's wrong.

This code is supposed to create a MathQuill box and then enter the letter 'f' into it. But the box remains empty.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mathquill-master/mathquill.css">
    </head>

    <body>

        <!-- loading external scripts -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="mathquill-master/mathquill.min.js"></script>

        <!-- MathQuill box -->
        <span class="mathquill-editable" id="mathquill_box"></span>

        <script type="text/javascript">

            $(function() {
                $('.mathquill-editable').focus();

                // creating 'fake' custom event (pressing the 'F' key)
                // (this is taken directly from the answer to the previous question)
                var customKeyDownEvent = $.Event('keydown');
                customKeyDownEvent.bubbles = true;
                customKeyDownEvent.cancelable = true;
                customKeyDownEvent.charCode = 70; // key code for 'F'
                customKeyDownEvent.keyCode = 70;
                customKeyDownEvent.which = 70;

                // send the event to the MathQuill box
                $('.mathquill-editable textarea').trigger(customKeyDownEvent);

              });
            </script>

    </body>

</html>

Any help would be immensely appreciated!

Community
  • 1
  • 1
bhbr
  • 101
  • 1
  • `$('.mathquill-editable')` is an input element, why does the `textarea` element nest inside of this ? – Sushanth -- Jul 20 '15 at 23:09
  • I took this line from the proposed solution as well, but also tried `$('.mathquill-editable').textarea.trigger(...)` – bhbr Jul 20 '15 at 23:18
  • also, using the latest jQuery version (2.1.4 instead of 1.7.1) is no remedy – bhbr Jul 20 '15 at 23:19
  • I don't see the `textarea` element in the `HTML` . Is that intended ? – Sushanth -- Jul 20 '15 at 23:19
  • The `textarea` element is part of the `.mathquill-editable` and hidden. It appears in the page resources. The jQuery command selects the `textarea` element inside the mathQuill `span` element. I checked this by putting it in a local variable and debugging in the browser. – bhbr Jul 21 '15 at 07:37
  • OK, .trigger() passes along e. g. arrow key presses, but not letters. That's not a bug, but a security feature. Trying to implement [this](http://bililite.com/blog/2015/01/14/rethinking-fn-sendkeys/) now. – bhbr Jul 21 '15 at 10:09

1 Answers1

1

Use mathquill's built in write method to insert latex at the current cursor position. For instance:

$('.mathquill-editable').mathquill('write', 'x^2')

Refer to my previous answer for how to focus it afterwards.

Community
  • 1
  • 1
hkk
  • 2,069
  • 1
  • 23
  • 48