Прокрутка текстовой области в определенную область с помощью JavaScript - PullRequest
Новая
       24

Прокрутка текстовой области в определенную область с помощью JavaScript

5 голосов
/ 04 августа 2011

У меня есть текстовая область с полосой прокрутки.Мне нужно изменить положение вашего курсора в текстовой области с помощью javascript И прокрутить текстовую область, чтобы ваш курсор был видимым. Я использую elem.selectionStart и elem.selectionEnd для перемещения вашего курсора, но когда я перемещаю егодо точки, которая не видна, текстовое поле не прокручивается, поэтому курсор виден.

Дополнительные сведения (вероятно, TL; DR). Я создаю редактор слайд-шоу и предпросмотр полного слайд-шоу рядом средактор (текстовая область с полосой прокрутки) для содержимого.При перемещении курсора по текстовой области слайд-шоу меняет слайды, поэтому вы всегда просматриваете редактируемый слайд.Мне нужно, чтобы при смене слайда (с помощью кнопок) курсор перемещался, и вы могли видеть код, сгенерировавший этот слайд. 

// slideBoundries has numbers which are the indexes where the slides begin/end
// eg: [0, 81, 140, 250] for slideshow with 3 slides

if (doc.editor.selectionEnd > slideBoundries[curSlide] &&
    doc.editor.selectionEnd < slideBoundries[curSlide + 1]) {
    return;
}
doc.editor.selectionStart = slideBoundries[curSlide];
doc.editor.selectionEnd = slideBoundries[curSlide];

Я мог бы просто посчитать количество новых строк в файле, чтобы я зналкак далеко, чтобы прокрутить вниз, но есть много строк, которые длинные и занимают несколько строк.Я использую моноширинный шрифт, поэтому подсчитываю количество строк и строк, занимающих несколько строк, но я бы хотел более простой способ.Есть ли функция, которую я мог бы вызвать, чтобы имитировать то, что происходит, когда пользователь перемещает свой курсор, когда текстовое поле всегда прокручивается до той точки, когда пользователь нажимает ...

РЕДАКТИРОВАТЬ: из-за популярного спроса, вот скрипка:http://jsfiddle.net/tShQ2/

Метод, который я собираюсь использовать для решения этой проблемы, - это создание фантомного текстового поля, которое имеет такую ​​же ширину, но автоматически масштабируется до высоты.Он должен быть видимым, иначе он не будет работать, поэтому установите его в положение «абс» и переместите его за пределы экрана.Затем поместите текст перед желаемой позицией курсора.Затем прокрутите настоящую текстовую область до высоты фантомной текстовой области.

1 Ответ

2 голосов
/ 05 августа 2011

Ваше решение хорошее, но позвольте мне предложить несколько вещей, чтобы облегчить его.

  1. Используйте фантомный div, а не textarea, так как div автоматически изменит свой размер. Просто убедитесь, что соответствует стилям.

  2. Чтобы скрыть фантомный div, используйте:

    visibility: hidden;
    position: absolute;

    Это имеет тот же эффект, что и display: none, но позволяет div иметь высоту.

Еще одна вещь. Для IE вы можете создать диапазон от выделения и прокрутить до него явно: 

document.selection.createRange().scrollIntoView();
...