webew
Войти » Регистрация
 
JavaScript :: События

Табуляция в текстовых полях форм

18 июля 2008, 12:44

Как часто вам приходится писать в текстовых полях на web-страницах текст, требующий табуляцию (например, HTML-код)? Если вы знакомы с этой проблемой, то помните, что рефлекс, выработанный в большинстве редакторов, приводит к потере фокуса у текущего элемента формы. Таково поведение браузера по-умолчанию, которое можно забороть, в случае необходимости, конечно.

Проблема уже решалась, в частности Владимиром Токмаковым. Чем не понравилось предлагаемое решение:

  • Требуется библиотечный файл common.js на 13.5Кб.
  • Сам скрипт обрабатывает все текстовые поля на странице по факту загрузки, что не всегда удобно.
  • Хотелось бы иметь минимальный объем кода для такой простой фичи.

Немного пошаманив с кроссбраузерностью, получаем такой простой код:

function addHandler(object, event, handler, useCapture) {
    if (object.addEventListener) {
        object.addEventListener(event, handler, useCapture ? useCapture : false);
    } else if (object.attachEvent) {
        object.attachEvent('on' + event, handler);
    }
}
function tabInsertInit(obj) {
    var _obj = obj;
    if (window.opera) addHandler(obj, "keypress", function(evt) {tabInsert(evt, _obj);});
    else addHandler(obj, "keydown", function(evt) {tabInsert(evt, _obj);});
}
function tabInsert(evt, obj) {
    evt = evt || window.event;
    var key = evt.keyCode || evt.which;
    if (key == 9) {
        if (obj.nodeName) if (obj.nodeName.toLowerCase() == "textarea") obj.focus();
        if(document.selection) {
            var iesel = document.selection.createRange().duplicate();
            iesel.text = "\t";
        } else {
            var start = obj.selectionStart;
            var end = obj.selectionEnd;
            var left = obj.value.substring(0, start);
            var right = obj.value.substring(end);
            var scroll = obj.scrollTop;
            obj.value = left + "\t" + right;
            obj.selectionStart = obj.selectionEnd = start + 1;
            obj.scrollTop = scroll;
            obj.focus();
        }
        if(evt.preventDefault) evt.preventDefault();
        evt.returnValue = false;
        return false;
    }
}

Всё что требуется — это передать функции tabInsertInit() ссылку на объект, в котором планируется вставлять табы, вместо потери фокуса. Смотрим пример.

Совместимость

  • WIN: IE7
  • WIN: FF2
  • WIN: Стабильная работа в Opera 9.5. В более низких версиях работает с косяками, характер которых зависит от положения звезд на небе :-)
  • WIN: Safari 3

Обнаружили неработоспособность скрипта в своем браузере? Пишите об этом в комментах, будем бороть.


© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
Добавить комментарий
Отображение комментариев: Древовидное | Плоское

Serg_pnz

Мой ответЧемберлену))
На библиотеке openjs

Преимущества: весит всего 6 кБ. Поддерживает ИЕ6. Если уж пользоваться openjs, то можно намутить еще горячих кнопок, например Crtl+Enter для отправки формы (для любителям аськи).

Недостаток: в Opera 9.5 Tab вставляет, но всё же переходит на другое поле.

Скачать исходники
18.07.2008, 16:53
Ответить

Serg_pnz

Забыл((

По табу - переходим на другое поле, для вставки надо пользоваться сочетанием Shift+Tab
18.07.2008, 16:55
Ответить

Serg_pnz

Придумал! Назначим сочетание Ctrl+Alt и Опера сдалась)) Пример

Админу: Почему тут нельзя редактировать свои комменты?
18.07.2008, 17:03
Ответить

Serg_pnz

Нет. Не работает первый пример нигде как надо /*Уверяю, пока тестил на локалке было всё нормально. Ничего не понимаю :((*/...
Второй работает.
18.07.2008, 17:12
Ответить

1234ru

Serg_pnz
Админу: Почему тут нельзя редактировать свои комменты?

Справа от текста комментария есть ссылка "Редактировать" (по моему недосмотру был глюк, и она не отображалась)
То, что не убивает нас, делает нас инвалидами.
20.07.2008, 08:09
Ответить

bur

Сергей, спасибо за ссылку на полезную библиотечку.
Я внимательно просмотрел её исходник и могу заверить, что обработкой табов shortcut.js никак не занимается.
Это полезная библиотека умеет делать слкдующее:
- принимать комбинации клавиш, перечисленныз через "+" (первый аргумент метода add)
- навешивать на них событий, прикрепляя к событиям переданный пользователем обработчик (обработчик - это второй аргумент)
- принимать ряд параметров (третий аргумент), которые показывают тип события, применять ли его к тескстовым элементам форм, на какой элемент навешивать события, блокировать ли дефолтный браузерный обработчик и др.

Грубо говоря, с помощью этой библиотеки можно запросто добиться того, чтобы при нажатии Tab-а не происходило потери фокуса. А вот ставить символ табуляции придется либо своими силами в обработчике, либо забить на всю библиотеку и написать отдельный маленький скрипт, что и сделано в статье :-)
18.07.2008, 17:26
Ответить
NO USERPIC

mihdan

Хорошее решение правда "глюченое"
Лебедевское решение - в самый раз
19.07.2008, 16:49
Ответить

bur

Лебедевское решение - это и есть решение Владмимира Токмакова, упоминаемое в статье.
А чем глючное?
19.07.2008, 18:49
Ответить
NO USERPIC

mihdan

Покоцал я Лебедевское решение-3 КБт кроссбраузерно-все отлично работает!
20.07.2008, 19:57
Ответить

bur

Цитата из статьи про "Лебедевское решение":

Цитата:
Проблема уже решалась, в частности Владимиром Токмаковым. Чем не понравилось предлагаемое решение:
* Требуется библиотечный файл common.js на 13.5Кб.
* Сам скрипт обрабатывает все текстовые поля на странице по факту загрузки, что не всегда удобно.
* Хотелось бы иметь минимальный объем кода для такой простой фичи.
21.07.2008, 11:28
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100