当光标在视口之外时,在 Mathquill 中,除非用户滚动,否则光标将保持隐藏状态。通常与普通计算器视图一样,数学字段应随光标自动滚动,以便始终向用户显示光标。
其他数学编辑的行为: https ://i.imgur.com/1JbRv2F.gifv
Mathquill 的行为: https ://i.imgur.com/9E15uS2.gifv
我试图检查光标是否在视口之外,然后我会自动滚动,但问题是光标失去焦点并变成空元素,我无法滚动到它。
当光标在视口之外时,在 Mathquill 中,除非用户滚动,否则光标将保持隐藏状态。通常与普通计算器视图一样,数学字段应随光标自动滚动,以便始终向用户显示光标。
其他数学编辑的行为: https ://i.imgur.com/1JbRv2F.gifv
Mathquill 的行为: https ://i.imgur.com/9E15uS2.gifv
我试图检查光标是否在视口之外,然后我会自动滚动,但问题是光标失去焦点并变成空元素,我无法滚动到它。
我通过使用以下代码解决了这个问题:
首先我添加了一个函数来检测光标是否在视口之外(来源:https ://stackoverflow.com/a/15203639/3880171 )
function isElementVisible(el) {
var rect = el.getBoundingClientRect(),
vWidth = window.innerWidth || document.documentElement.clientWidth,
vHeight = window.innerHeight || document.documentElement.clientHeight,
efp = function (x, y) {
return document.elementFromPoint(x, y)
};
// Return false if it's not in the viewport
if (rect.right < 0 || rect.bottom < 0
|| rect.left > vWidth || rect.top > vHeight)
return false;
// Return true if any of its four corners are visible
return (
el.contains(efp(rect.left, rect.top))
|| el.contains(efp(rect.right, rect.top))
|| el.contains(efp(rect.right, rect.bottom))
|| el.contains(efp(rect.left, rect.bottom))
);
}
我将 onKeyUp 事件添加到 mathview :
<span id="expression" onkeyup="onEditorKeyPress()"></span>
最后,具有滚动魔力的功能是:
function scrollToCursor() {
mathField.focus();
var cursor = document.querySelector(".mq-cursor");
if (cursor != null && !isElementVisible(cursor)) {
document.querySelector(".mq-cursor").scrollIntoView();
}
}
function onEditorKeyPress() {
scrollToCursor();
}