Табуляция в текстовых полях форм
Как часто вам приходится писать в текстовых полях на web-страницах текст, требующий табуляцию (например, HTML-код)? Если вы знакомы с этой проблемой, то помните, что рефлекс, выработанный в большинстве редакторов, приводит к потере фокуса у текущего элемента формы. Таково поведение браузера по-умолчанию, которое можно забороть, в случае необходимости, конечно.
Проблема уже решалась, в частности Владимиром Токмаковым. Чем не понравилось предлагаемое решение:
- Требуется библиотечный файл common.js на 13.5Кб.
- Сам скрипт обрабатывает все текстовые поля на странице по факту загрузки, что не всегда удобно.
- Хотелось бы иметь минимальный объем кода для такой простой фичи.
Немного пошаманив с кроссбраузерностью, получаем такой простой код:
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. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
