Мой Kbyte.Ru
Рассылка Kbyte.Ru
Группы на Kbyte.Ru
Партнеры Kbyte.Ru
Реклама
Сделано руками
Сделано руками
> Исходные коды - Артем Федоров -

JavaScript - Общие вопросы

Все примеры / Общие вопросы

Вставка BB-тегов в поле

Автор: Артем Федоров | добавлено: 12.11.2011, 19:04 | просмотров: 2767 (4+) | комментариев: 0 | рейтинг: *x8
Данный код показывает, как сделать вставку тегов(в нашем случае bb) в поле или выделить ими текст.

Инструкции

Вставить скрипт в <head></head>
создать кнопки с атрибутом onClick="tag_add(куда,'от крывающий тег','зыкрывающий тег')"
в функции tag_add(obj, str1, str2):
obj - объект где происходит вставка
str1 - открывающий тег
str2 - закрывающий тег
для распознавания объекта присваеваем объекту id и испольуем document.getElementById('') в нашем случае id="msg"
пример использования ниже

Код

<html>
<head>
<title>Вставка BB-тегов </title>
<script>
//Вставка BB тегов
function tag_add(obj, str1, str2)
{
  obj.focus(); 
  // Для IE
  if(document.selection) 
  {
   var s = document.selection.createRange();
   if(s.text)
   {
     if(str2!="")s.text = str1 + s.text + str2;
     else s.text = str1;
     s.select();
   }
   else
   {
     s.text = str1 + s.text + str2;
     s.select();
   }
   return true;
  }
  // Opera, FireFox
  else if (typeof(obj.selectionStart) == "number")
  {
   //Обрамляем тегами выделенный текст 
   if (obj.selectionStart != obj.selectionEnd)
   {
     var start = obj.selectionStart;
     var end = obj.selectionEnd;
     s = obj.value.substr(start,end-start);
     tmp=obj.value.substr(end);
     if(str2!="")obj.value = obj.value.substr(0, start) + str1 + s + str2;
     else obj.value = obj.value.substr(0, start) + str1;
     tmpsel = obj.value.length - str2.length;
     tmpscroll=obj.scrollHeight;
     cnt = obj.value.split(/[\r\n]/g).length;
     obj.value+=tmp;
     obj.selectionStart = obj.selectionEnd = tmpsel;
     if(cnt>obj.rows)obj.scrollTop = tmpscroll-12;
   }
   //Вставляем теги в позицию курсора
   else
   {
     var start = obj.selectionStart;
     tmp=obj.value.substr(start);
     obj.value = obj.value.substr(0, start) + str1 + str2;
     tmpsel = obj.value.length - str2.length;
     tmpscroll=obj.scrollHeight;
     cnt = obj.value.split(/[\r\n]/g).length;
     obj.value+=tmp;
     obj.selectionStart = obj.selectionEnd = tmpsel;
     if(cnt>obj.rows)obj.scrollTop = tmpscroll;
   }
   //В tmpscroll запоминаем позицию скроллбара - в силу того, что в некоторых браузерах при замене текста он прокручивается вверх.
   return true;
  }
  return false;
}
 </script>
</head>
<body>
<form>
<textarea rows="5" cols="50" id="msg">Kbyte.ru</textarea><br>
<input type="button" onclick="tag_add(document.getElementById('msg'),'','')" value="Жирный"><input type="button" onclick="tag_add(document.getElementById('msg'),'','')" value="Подчеркнутый"><input type="button" onclick="tag_add(document.getElementById('msg'),'','')" value="Курсив">
</form>
</body>
</html></body>
Об авторе

Артем Федоров

vk.com/temamagic
t.me/temamagic

См. также:
Профиль автора
Артем Федоров
Последние комментарии (всего: 0)

Добавлять комментарии могут только зарегистрированные пользователи сайта.
Если у Вас уже есть учетная запись на Kbyte.Ru, пройдите процедуру авторизации OpenID.
Если Вы еще не зарегистрированы на Kbyte.Ru - зарегистрируйтесь.


Нет комментариев...

Авторизация
 
OpenID
Зарегистрируйся и получи 10% скидку на добавление своего сайта в каталоги! Подробнее »
Поиск по сайту
Реклама
Счетчики