VPF::textarea как в mozilla firefox - Форум программистов

LuckyCat

Дата 13.11.2009, 17:40 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 15.6.2008

Репутация: нет
Всего: нет

Нужен работающий пример.
Очень нравится, как в мозилле отображается textarea.
Когда текста мало, то вертикальной полосы нету, как на скриншоте:

user posted image

но когда текст не вмещается в текстовое поле, появляется прокрутка:
user posted image

Как реализовать, чтобы работало во всех браузерах (в том числе и в IE6)? Или где найти готовое решение?
Кто-нибудь с такой задачей сталкивался?

Это сообщение отредактировал(а) LuckyCat - 13.11.2009, 17:41

bars80080

Дата 13.11.2009, 18:33 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

в смысле? что реализовать?
чтоб, когда текста много, появлялась прокрутка?

так оно так и есть. причём, в любом браузере. конечно, если вы не убираете её специально

Amphiluke

Дата 13.11.2009, 20:20 (ссылка)

(голосов:1)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Цитата(LuckyCat @ 13.11.2009, 17:40

)

Как реализовать, чтобы работало во всех браузерах (в том числе и в IE6)?

А стóит ли оно того? smile

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
    #tarea {overflow: hidden;}
</style>
<title>Документ без названия</title>
</head>

<body>
<form action="#" id="frm">
    <textarea cols="100" rows="15" name="tarea" id="tarea"></textarea>
</form>
<script type="text/javascript">
    function showHideScroll(evnt) {
        var ev = (evnt) ? evnt : event;
        var sender = (ev.target) ? ev.target : ev.srcElement;
        var txt = sender.value.replace(/\n/g, "");
        if ((sender.value.length > sender.rows * sender.rows) ||
                    (sender.value.length - txt.length > sender.rows - 2)) {
            sender.style.overflow = "auto";
        } else {
            sender.style.overflow = "hidden";
        }
    }
    
    function addEventHandlers(obj, handler, events) {
        for (var i = 0; i < events.length; i++) {
            if (obj.addEventListener) {
                obj.addEventListener(events[i], handler, false);
            } else {
                obj.attachEvent("on" + events[i], handler);
            }
        }
    }
    
    var txtarea = document.getElementById("tarea");
    addEventHandlers(txtarea, showHideScroll, ["keydown", "keyup", "keypress", "mouseup"]);
</script>
</body>
</html>

UPD: Исправил кое-какой баг. smile

Это сообщение отредактировал(а) Amphiluke - 14.11.2009, 12:28

youri

Дата 14.11.2009, 01:39 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 2
Всего: 16

Цитата(Amphiluke @ 13.11.2009, 20:20

)

А стóит ли оно того?

+1
но... а в каком браузере не достаточно этого:

Код


<textarea style="overflow: auto;"></textarea>

--------------------

С кем разговаривает Microsoft

Amphiluke

Дата 14.11.2009, 12:19 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Цитата(youri @ 14.11.2009, 01:39

)

а в каком браузере не достаточно этого:

В Opera (сужу по 9.63).

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »