Я работаю над текстовым редактором для iOS, и большая его часть работает, но сталкиваюсь с бесконечными проблемами, обеспечивающими видимость курсора в окне просмотра, когда пользователь начинает печатать.
Я придумал новый подход: вставить диапазон в позицию курсора, прокрутить до диапазона, а затем удалить его. (Я не стал прокручивать только в том случае, если диапазон отображается на экране.) Вот что я написал:
document.addEventListener('keypress', function(e) {
jumpToID();
}, false);
function jumpToID() {
var id = "jumphere2374657";
var text = "<span id='" + id + "'> </span>"
document.execCommand('insertHTML', false, text);
var element = document.getElementById(id);
element.scrollIntoView();
element.parentNode.removeChild(element);
}
В некоторых случаях это работает просто отлично, а в некоторых случаях между каждым нажатием клавиши остается неразрывный пробел, удаляя только теги ‹span>‹/span>. Есть идеи? Я открыт для лучших способов сделать это, если у кого-то есть предложения. Я немного шокирован тем, как сложно заставить курсор появляться, но JS для меня новичок.
ИЗМЕНИТЬ
Это код, который работает:
var viewportHeight = 0;
function setViewportHeight(vph) {
viewportHeight = vph;
if(viewportHeight == 0 && vph != 0)
viewportHeight = window.innerHeight;
}
function getViewportHeight() {
if(viewportHeight == 0)
return window.innerHeight;
return viewportHeight;
}
function makeCursorVisible() {
var sel = document.getSelection(); // change the selection
var ran = sel.getRangeAt(0); // into a range
var rec = ran.getClientRects()[0]; // that we can get coordinates from
if (rec == null) {
// Can't get coords at start of blank line, so we
// insert a char at the cursor, get the coords of that,
// then delete it again. Happens too fast to see.
ran.insertNode( document.createTextNode(".") );
rec = ran.getClientRects()[0]; // try again now that there's text
ran.deleteContents();
}
var top = rec.top; // Y coord of selection top edge
var bottom = rec.bottom; // Y coord of selection bottom edge
var vph = getViewportHeight();
if (top < 0) // if selection top edge is above viewport top,
window.scrollBy(0, top); // scroll up by enough to make the selection top visible
if (bottom >= vph) // if selection bottom edge is below viewport bottom,
window.scrollBy(0, bottom-vph + 1); // scroll down by enough to make the selection bottom visible
}
ViewportHeight сложнее, чем нужно для веб-приложения. Для мобильного приложения нам нужно учитывать клавиатуру, поэтому предлагаем метод для установки viewportHeight вручную, а также автоматическую настройку из window.innerHeight.
.execCommand('undo', ..
вместо использованияremoveChild
? - person Paul S.   schedule 05.10.2012