removeChild иногда удаляет весь промежуток, а иногда нет
Я работаю над многофункциональным текстовым редактором для 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);
}
В некоторых случаях это работает просто отлично, а в некоторых случаях между каждым нажатием клавиши остается промежуток без перерыва, удаляя тег & lt; span & gt; & lt; / span & gt; только теги. Есть идеи? Я открыт для более эффективных способов сделать это, если у кого-то есть предложения. Я немного шокирован тем, как трудно заставить курсор появляться, но тогда JS является новым для меня.
EDIT
Это код, который работает:
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.