Событие Onblur для MathField, созданного из элемента span при использовании mathquill - PullRequest
Новая
       21

Событие Onblur для MathField, созданного из элемента span при использовании mathquill

0 голосов
/ 31 октября 2018

У меня есть довольно простой код на https://js.do/sun21170/255369,, в котором элемент span с идентификатором math-field преобразуется в MathField с использованием библиотеки mathquill.

Этот код работает должным образом, поэтому, когда пользователь вводит x-3y = 20 или другое математическое выражение / уравнение, введенный текст автоматически вводится в Math библиотекой mathquill.

Вопрос

Есть ли обработчик в mathfield cofig, который будет срабатывать, когда пользователь фокусируется из MathField в этом коде, т.е. фокусируется вне диапазона с идентификатором math-field? Я пробовал различные обработчики в коде, но они запускаются только если я перемещаю курсор вверх или вверх или вниз с помощью клавиши со стрелкой. Я хотел бы сделать некоторую обработку, когда пользователь щелкает мышью за пределами MathField с помощью своей мыши.

Тот же демонстрационный код, что и в приведенной выше ссылке, также вставляется ниже. 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.css" />

<h1>Mathquill sample 1</h1>

<p>Type math here: <span id="math-field"></span>
</p>
<p>LaTeX of what you typed: <span id="latex"></span>
</p>

<script>
    var mathFieldSpan = document.getElementById('math-field');
    var latexSpan = document.getElementById('latex');

    var MQ = MathQuill.getInterface(2); // for backcompat
    var mathField = MQ.MathField(mathFieldSpan, {
        spaceBehavesLikeTab: true, // configurable
        handlers: {
            edit: function() { // useful event handlers
                latexSpan.textContent = mathField.latex(); // simple API
            },
            upOutOf: function(mathField) {
                alert("upOutOf");
            },
            moveOutOf: function(dir, mathField) {
                alert("moveOutOf");
            },
            selectOutOf: function(direction, mathField) {
                alert("selectOutOf");
            },
            downOutOf: function(mathField) {
                alert("downOutOf");
            }
        }
    });
    mathFieldSpan.onblur = function() {
        alert("onblur");
    }
</script>
<style>
    #math-field {
        min-width: 400px;
    }
</style>
...