我在contentEditable应用div内的Windows Store WebView内有一位编辑，因为contentEditable处理{{1}我必须通过在PageUp / PageDown中捕获Page Up / Page Down事件并将页面向上或向下滚动一个屏幕高度来实现我自己的key down。
麻烦的是，分页时光标不会移动。当用户按下光标键时，页面会在按下Javascript
这是我正在使用捕获按键事件的代码
Page Up / Page Down我可以使用此功能设置插入位置
$(window).bind('keydown', function (event) {
if (event.which == 33) {
// page up
event.preventDefault();
// scroll page to current scroll - window height
$(document).scrollTop($(document).scrollTop() - document.body.clientHeight);
// place cursor on page
}
else if (event.which == 34) {
// page down
event.preventDefault();
// scroll page to current scroll + window height
$(document).scrollTop($(document).scrollTop() + document.body.clientHeight);
// move cursor to bottom
}
});
但我怎么知道在哪里设置呢？我可以通过截断光标后的文本然后测量div的高度来推断给定位置的文本高度，但我不知道如何反向。
我正在寻找任何解决方案，它允许Page Up / Page Down键在Windows Store应用程序的WebView中的contentEditable div中正常运行。
“正常”的定义：当光标位于long，contentEditable文档的顶部时，按// 'editor' is a reference to my contentEditable div
function setCaretPosition(cPos) {
var charIndex = 0, range = document.createRange();
range.setStart(editor, 0);
range.collapse(true);
var nodeStack = [editor], node, foundStart = false, stop = false;
while (!stop && (node = nodeStack.pop())) {
if (node.nodeType == 3) {
var nextCharIndex = charIndex + node.length;
if (!foundStart && cPos >= charIndex && cPos <= nextCharIndex) {
range.setStart(node, cPos - charIndex);
foundStart = true;
}
if (foundStart && cPos >= charIndex && cPos <= nextCharIndex) {
range.setEnd(node, cPos - charIndex);
stop = true;
}
charIndex = nextCharIndex;
} else {
var i = node.childNodes.length;
while (i--) {
nodeStack.push(node.childNodes[i]);
}
}
}
selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
会将div向下滚动该div的高度，并且将光标移动相同的量即可。 Page Down显然应该相反，向上滚动。
这显然不是Page Up / Page Up在Mac上运行的方式，但我对此并不感兴趣，因为这是一个Windows应用商店应用。
注意：我不是在寻找设置插入位置的功能。我已经有了。
仅供参考：我发现在桌面模式下在IE11中测试是足够的。它使用与Windows应用商店WebView相同的呈现/ javascript引擎。