Конвертирование текста в поле ввода из русского в английский. Вставка BB-кодов в текстовое поле.

Конвертирование текста в поле ввода из русской раскладки в английскую и обратно.

<script type="text/javascript">
function convertLayout(e, elem)
{
   e = e || window.event;
   var eng='qwertyuiop[]asdfghjkl;\'zxcvbnm,./QWERTYUIOP{}ASDFGHJKL:"ZXCVBNM<>?@#$^&|';
   var rus='йцукенгшщзхъфывапролджэячсмитьбю.ЙЦУКЕНГШЩЗХЪФЫВАПРОЛДЖЭЯЧСМИТЬБЮ,"№;:?/';
   var src=elem.value;
   if((e.ctrlKey) && ((e.keyCode == 0xA) || (e.keyCode == 0xD)))
   {
           for(i=0;i<src.length;i++){
         for(j=0;j<eng.length;j++)
         {
            if(src.substr(i,1)==eng.substr(j,1))
               src=src.replace(src.substr(i,1),rus.substr(j,1));
            else if(src.substr(i,1)==(rus.substr(j,1)))
               src=src.replace(src.substr(i,1),eng.substr(j,1));
              }
      }
   }
   elem.value=src;
}
</script>
...
<form name="msg_form" action="send_message.php" method="post">
   <input type="text" name="message" onkeypress="convertLayout(event,this)"><br />
   (Подсказка: нажмите Ctrl+Вниз для перевода текста в другую раскладку)
   <input type="submit" value="Send message">
</form>

В примере используется комбинация клавиш Ctrl+Enter. Чтобы использовать, например, Shift+Enter, надо заменить в коде e.ctrlKey на e.shiftKey.

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

<script type="text/javascript">
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;
}

//Теперь на основе этой конструкции можно реализовать вставку сложных элементов

/*Смайлы*/
function add_smile(obj,smile)
{
   tag_add(obj,smile,"");
}

/*Тег с одним атрибутом(e.g. [url=http//blablabla.com]blablabla[/url])*/
function add_single(obj,tag,value)
{
   tag_add(obj,"["+tag+"="+value+"]","[/"+tag+"]");
}

/*Тег с несколькими аттрибутами(e.g. [img height=50 width=25]http://mysite.com/images/25.jpg[/img])*/
function add_image(obj,height,width)
{
   tag_add("[img height="+height+" width="+width+"]","[/img]");
}
</script>
...
<textarea name="message" id="message">Test...</textarea><br />
<input type="button" onclick="tag_add(document.getElementById('message'),'[b ]','[/b ]')" value="Bold">
<input type="button" onclick="add_single(document.getElementById('message'),'url','http://mysite.com')" value="Bold">

Следующая запись

Предыдущая запись

Похожие записи

Комментарии

  1. Роман

    Роман на 29.07.2011 10:10

    спасибо огромное за скрипт!очень помог

Пингбэки

Оповещения открыты.

Трэкбэки

URL архива

Only authorized users can post comments