javascript, управление textarea, контроль курсора, javascript textarea
|
Содержание
- Textarea - немного об этом html объекте
- Textarea - как вставить текст туда, где сейчас курсор?
- Как перемещать курсор внутри textarea?
- Как определить позицию курсора в textarea?
Textarea - немного об этом html объекте
Стоит отметить, что до последнего момента недолюбливал, а теперь можно смело сказать недооценивал этот html объект. На самом деле объект довольно мощный. Теперь я его использую куда чаще, чем тот же input. Сам по себе конечно объект слабоват, но в связке с javascript становится куда мощнее, чем input из-за своего многострочного преимущества и неограниченной возможности ввода кода. Хотел бы отметить тот факт, что после замены в большинстве случаев объекта input на textarea у меня на сайтах стало куда меньше банальных орфографических ошибок, так как браузеры в основной своей массе подсвечивают орфографические ошибки только в объекте textarea, а не input.
Просто постоянно работая с этим объектом, устал постоянно искать четкие скрипты, комментарии по частым проблемам. А приходится тупо бродить по тупо скопированным с одними и тем же ошибками в скриптах, поэтому решил в первую очеред сделать для себя подробный help для работы с объектом textarea, да за одним и поделиться с такими же страждающими знаний в этой области.
Но обо всем по порядку.
Как вставить теги в тексте textarea?
function insertTag(_obj_name, _tag_start, _tag_end)
// _obj_name - name объекта - как правило, textarea, но при желании можно сделать любой
// указываем именно NAME, так как согласно стандартам DOCTYPE HTML 4.01 strict и выше
// свойство ID у объектов ввода является не приемлемым и требуется обращаться только name
// _tag_start - что вставлять перед выделенным текстом
// _tag_end - что вставлять после выделенного текста
{
// берем объект
var area=document.getElementsByName(_obj_name).item(0);
// Mozilla и другие НОРМАЛЬНЫЕ браузеры
if (document.getSelection)// если есть что-либо выделенное
{ // берем все что до выделения
area.value=area.value.substring(0,area.selectionStart)+
// вставляем стартовый тег
_tag_start+
// вставляем выделенный текст
area.value.substring(area.selectionStart, area.selectionEnd)+
// вставляем закрывающий тег
_tag_end+
// вставляем все что после выделения
area.value.substring(area.selectionEnd,area.value.length);
}
// Заплатка для ебучего Internet Explorer, извинете за грубость,
// но других слов просто нет, так как уже честно заебался в каждой функции
// писать под него заплатки
else
{ var selectedText=document.selection.createRange().text;// берем текст
if (selectedText!='')// если имеется какой-то выделенный текст
{ var newText=_tag_start+selectedText+_tag_end;// составляем новый текст
document.selection.createRange().text=newText;// вставляем новый текст
}
}
}// end function
Вызывается все это хозяйство очень простым вешаньем функции на любое событие, например onclick:
onclick="insertTag('text_','<strong>','</strong>');"
Подробнее можно посмотреть рабочий пример по ссылке.
Textarea - как вставить текст туда, где сейчас курсор?
function insert_text_cursor(_obj_name, _text)
// _obj_name - name объекта - как правило, textarea, но при желании можно сделать любой
// указываем именно NAME, так как согласно стандартам DOCTYPE HTML 4.01 strict и выше
// свойство ID у объектов ввода является не приемлемым и требуется обращаться только name
// _text - текст, который требуется вставить в том место, где сейчас находится курсор
{
// берем объект
var area=document.getElementsByName(_obj_name).item(0);
// Mozilla и другие НОРМАЛЬНЫЕ браузеры
if ((area.selectionStart)||(area.selectionStart=='0'))
{ // определяем, где начало выделения, если оно существует
var p_start=area.selectionStart;
// определяем, где заканчивается выдедение, если оно существует
var p_end=area.selectionEnd;
// вставляем соответствующий текст в указанное место
area.value=area.value.substring(0,p_start)+_text+area.value.substring(p_end,area.value.length);
}
// Исправляем очередной геморрой с Internet Explorer
// единственный НЕ человеческий браузер
if (document.selection)// если объект может иметь выделения
{ // передаем фокус ввода на нужный нам объект
area.focus();
// узнаем выделение, если оно существует
sel=document.selection.createRange();
// вставляет текст в указанное место
sel.text=_text;
}
}// end function
Подробнее можно посмотреть рабочий пример по ссылке.
Как перемещать курсор внутри textarea?
function cursor_start(_obj_name)// перемещение курсора (cursor) в начало texarea
// _obj_name - name объекта - как правило, textarea, но при желании можно сделать любой
// указываем именно NAME, так как согласно стандартам DOCTYPE HTML 4.01 strict и выше
// свойство ID у объектов ввода является не приемлемым и требуется обращаться только name
// данные функции легко настраиваемы и для обработки объекта input
{
// Для всех Нормальных браузеров
var area=document.getElementsByName(_obj_name).item(0);
if (area.selectionStart)
{ area.focus();
area.setSelectionRange(0,0);
}
// Очередная жопа с Internet Explorer
if (area.createTextRange)
{ // узнаем общий размер текста
var r=area.createTextRange();
// Свойство collapsed вернет true, если граничные точки имеют
// одинаковые контейнеры и смещение (false в противном случае)
r.collapse(true);
r.select();
}
}// /function cursor_start
// _____________________________________________________________________________
function cursor_end(_obj_name)
// Выполняет: перемещение курсора (cursor) textarea в конец
// _obj_name - name объекта - более подробно почему так, написано выше
{
// Для всех Нормальных браузеров
var area=document.getElementsByName(_obj_name).item(0);
if (area.selectionStart)
{ // узнаем длину содержимого textarea
var len=area.value.length;
area.focus();// aктивируем фокус ввода на объекте
area.setSelectionRange(len,len);// перемещаемся в конец текста в объекте
area.focus();// aктивируем фокус ввода на объекте
}
// отдельная корявка под Internet Explorer
if (area.createTextRange)
{ // выделяем весь текст
var r=area.createTextRange();
// Свойство collapsed вернет true, если граничные точки имеют
// одинаковые контейнеры и смещение (false в противном случае)
r.collapse(false);
r.select();
}
}// /function cursor_end
Подробнее можно посмотреть рабочий пример по ссылке.
Как определить позицию курсора в textarea?
function cursor_position(_obj_name)// возвращает позицию курсора (cursor) в textarea
// _obj_name - name объекта - как правило, textarea, но при желании можно сделать любой
// указываем именно NAME, так как согласно стандартам DOCTYPE HTML 4.01 strict и выше
// свойство ID у объектов ввода является не приемлемым и требуется обращаться только name
// данные функции легко настраиваемы и для обработки объекта input
{
// Для всех Нормальных браузеров
var area=document.getElementsByName(_obj_name).item(0);
area.focus();
// для всех нормальных браузеров
if(area.selectionStart)
{ return area.selectionStart;// возвращаем позицию курсора в texarea
}
// очередная жопа с Internet Explorer
if (document.selection)// если в документе где то стоит курсор
{ // если честно нижний код даже комментировать не хочется, это такой гемор, что прям вообще
var sel=document.selection.createRange();
var clone=sel.duplicate();
sel.collapse(true);
clone.moveToElementText(obj);
clone.setEndPoint('EndToEnd',sel);
return clone.text.length;// возвращаем, где стоит курсор
}
return 0;// по умолчанию курсор будет стоять в начале
}
}// /function cursor_position
Подробнее можно посмотреть рабочий пример по ссылке.