Техника Javascript / Jquery: текстовая область фиксированного размера с разбивкой по страницам: скрыто - PullRequest
1 голос
/ 15 апреля 2011

У меня есть элемент пользовательского ввода <textarea id='input_text'> со следующим CSS:

#input_text{ 
    height:200px; 
    overflow:hidden;  
    border-width:0;
    background-color:transparent;
}

Основная причина 'overflow: hidden' состоит в том, чтобы избежать появления уродливой полосы прокрутки, которая появляется, когда текстовая областьполный.Вместо этого я хотел бы, чтобы нумерация страниц происходила, когда текстовая область заполнена.Как лучше всего это осуществить?Я думаю, javascript / jquery, но не уверен, как именно.

Дополнительные примечания: при достижении конца текстовой области происходит автоматическое разбиение на страницы (новая страница), в то время как страница переключается обратно (старая страница), если пользователь отступает, или нажимает на ссылку на нее (обратно на страницу 1).).

Не ожидаю полного решения, но некоторые полезные советы пригодятся мне (возможно, будущим кодировщикам).Благодарю.

Ответы [ 3 ]

1 голос
/ 15 апреля 2011

Я бы сделал что-то вроде:

  • В событии keyup проверьте, не превышает ли scrollHeight высоту текстовой области.
  • Если это удалить текст, этов текстовой области и сохранить его в массиве.Значения этого массива будут составлять ваши "страницы".
  • Затем вам нужно будет создать некоторый пользовательский интерфейс для навигации по страницам назад и вперед.

Интересная частьэто решение было бы, как перетекать страницы, когда что-то добавляется или удаляется в середине.

1 голос
/ 15 апреля 2011

Нумерация текстовой области - ужасная идея. Если мой комментарий слишком длинный, мне не нужно просматривать несколько страниц, чтобы прочитать его.

Я бы пошел с http://plugins.jquery.com/project/TextAreaResizer, тем же плагином, который StackOverFlow использует в своих текстовых областях. Это позволяет пользователю расширять текстовое поле по своему усмотрению.

0 голосов
/ 15 апреля 2011

Плагин jQuery.elastic сделает то, что вы ищете. Он растягивает текстовое поле по вертикали, так как в него вводится больше текста.

...