Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Перемещаем выделенный текст

Автор: YurkaKursant 22.9.2009, 22:08

Есть такая задача: в textarea есть текст. При выделении любого слова, над ним появляется div с кнопкой. Нажимая на кнопку, при помощи "СелектТекст" надо выделенное слово вставить в текстовое поле <input type="text"/>, вырезая его из textarea.
У кого есть идеи, подскажите, пожалуйста. Очень нужно.

Автор: Amphiluke 22.9.2009, 23:47

Не очень понял, что значит

Цитата(YurkaKursant)

при помощи "СелектТекст"

Вот примерчик...

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <title>Template</title>
    <script type="text/javascript">
      selObj = null;
      var selTxt = "";
      function showDiv(sender) {
         if (window.getSelection) {
            selObj = {target: sender, start: sender.selectionStart, end: sender.selectionEnd};
            selTxt = sender.value.slice(selObj.start, selObj.end);
         } else {
            selObj = document.selection;
            if (selObj == null) return true;
            var selTxtRng = selObj.createRange();
            selTxt = selTxtRng.text;
         }
         document.getElementById("hint").style.visibility = "visible";
      }
      function cutTxt() {
         if (selObj.clear) {
            selObj.clear();
         } else {
            selObj.target.value = selObj.target.value.slice(0, selObj.start) + selObj.target.value.slice(selObj.end);
         }
         delete selObj;
         document.getElementById("hint").style.visibility = "hidden";
         document.getElementById("selTxtInput").value = selTxt;
         selTxt = "";
      }
   </script>
   
</head>

<body>
   <form action="#">
      Selected text: <input type="text" id="selTxtInput" />
      <input type="button" value="cut" id="hint" onclick="cutTxt();" style="visibility: hidden;" /><br />
      <textarea cols="50" rows="15" onselect="showDiv(this);"></textarea>
   </form>
</body>

</html>

Автор: YurkaKursant 23.9.2009, 06:02

А как сделать, чтобы при повторном записывании в текстовое поле предыдущая запись не удалялась, а к ней просто дописывалась следующая?

Автор: Amphiluke 23.9.2009, 06:40

Цитата(YurkaKursant @ 23.9.2009, 06:02

)

Ну вы даете smile

Код


document.getElementById("selTxtInput").value += selTxt;

Автор: YurkaKursant 23.9.2009, 07:57

Блин, действительно)
Ни как не получается параллельно вставлению слова в текстовое поле возводить первую букву в верхний регистр, вообще реально это реализовать?
Спасибо!

Автор: Amphiluke 23.9.2009, 08:21

Можно так.

Код


document.getElementById("selTxtInput").value += selTxt.charAt(0).toUpperCase() + selTxt.slice(1);

Автор: YurkaKursant 23.9.2009, 08:33

С кнопочкой все понятно. Но повесить div прямо над/под выделенным словом не получается. Да еще нужно, чтобы сразу 2 или 3 кнопочки было в div (такая "своеобразная менюшка"), причем по одной слово перемещается в одно текстовое поле, по другой во второе, по третьей в третье. Есть идеи?

Автор: Amphiluke 23.9.2009, 08:43

Сделать появляющийся div — не проблема. Самая главная проблема — определить клиентские координаты выделенного текста в окне браузера. В IE объект TextRange поддерживает атрибуты offsetLeft и offsetTop, так что там проблема решаема (хоть сейчас). А вот в FF как вытянуть координаты, что-то не вспомню. Надо смотреть https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide.

Если желаете могу написать для IE, дальше уж сами «ковыряйтесь» (время дорого).

Добавлено через 2 минуты и 27 секунд
Кстати, если выделение производится только мышью, то тоже легко можно сделать во всех браузерах — использовать атрибуты объекта Event.

Автор: YurkaKursant 23.9.2009, 08:52

Да, выделяем только мышью! Если кроссбраузерность с event реализуема, то это классно)

Автор: Amphiluke 23.9.2009, 09:27

Хм. Возникли (решаемые) проблемы с Event. Дело в том, что событие onselect не порождает его экземпляр, который можно было бы использовать для заполучения координат. Пришлось дополнительно навешивать «слушатель» события mouseup — ради только заполучения координат...

В общем, надоело. smile

Осталось только дело подогнать под конкретные нужды. Вот.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <title>Template</title>
   
   <style type="text/css">
      #hint {
         background: #FFFFDD;
         border: 1px solid #000000;
         display: none;
         padding: 5px 15px;
         position: absolute;
         width: 300px;
      }
   </style>
   
   <script type="text/javascript">
      selObj = null;
      var selTxtRng;
      var coords = {x:0, y:0};
      var selTxt = "";
      function showDiv(sender) {
         if (window.getSelection) {
            selObj = {target: sender, start: sender.selectionStart, end: sender.selectionEnd};
            selTxt = sender.value.slice(selObj.start, selObj.end);
         } else {
            selObj = document.selection;
            if (selObj == null) return true;
            selTxtRng = selObj.createRange();
            selTxt = selTxtRng.text;
         }
         var hintDiv = document.getElementById("hint");
         with (hintDiv.style){
            left = (selTxtRng) ? selTxtRng.offsetLeft + "px" : coords.x + "px";
            top = (selTxtRng) ? (selTxtRng.offsetTop - 50).toString() + "px" : (coords.y - 35).toString() + "px";
            display = "block";
            sender.focus();
         } 
      }
      function cutTxt(destInput) {
         if (selObj.clear) {
            selObj.clear();
         } else {
            selObj.target.value = selObj.target.value.slice(0, selObj.start) + selObj.target.value.slice(selObj.end);
         }
         delete selObj;
         document.getElementById("hint").style.display = "none";
         document.getElementById(destInput).value += selTxt.charAt(0).toUpperCase() + selTxt.slice(1);
         selTxt = "";
      }
      function storeCoords(evnt) {
         var ev = (evnt) ? evnt : event;
         coords.x = (ev.x) ? ev.x : ev.pageX;
         coords.y = (ev.y) ? ev.y : ev.pageY;
      }
   </script>
   
</head>

<body>
   <form action="#">
      <div id="hint">
         <input type="button" value="Cut -&gt; 1st" onclick="cutTxt('selTxtInput1');" />
         <input type="button" value="Cut -&gt; 2nd" onclick="cutTxt('selTxtInput2');" />
         <input type="button" value="Cut -&gt; 3rd" onclick="cutTxt('selTxtInput3');" />
      </div>
      Selected text #1: <input type="text" id="selTxtInput1" /><br />
      Selected text #2: <input type="text" id="selTxtInput2" /><br />
      Selected text #3: <input type="text" id="selTxtInput3" /><br />
      <textarea cols="50" rows="15" onselect="showDiv(this);" onmouseup="storeCoords(event);"></textarea>
   </form>
   
</body>

</html>

Автор: YurkaKursant 23.9.2009, 11:11

Спасибо большое)

Автор: YurkaKursant 24.9.2009, 10:24

Есть проблема: В разных браузерах положения div при появлении неприятно удивляет (в разных местах отображается). Как сделать так, чтобы появляющийся div был привязан координатам мыши (выше или ниже нее)????

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
   <title>Template</title>
   <STYLE type=text/css>
   #hint {
         background: #CCCCCC;
         border: 1px solid #000000;
         display: none;
         padding: 0px 2px 4px 2px;
         position: absolute;
         width: 114px;
         }
.button  {
background-color: #5B6A90;
border:1px solid #000000;
border-right-color: #000000;
border-bottom-color: #000000;
color:#ffffff;
margin:0px;
margin-left:0px;
font:bold 10px Arial; 
width: 110px;
        }  </style>
   
   <script type="text/javascript">
      selObj = null;
      var selTxtRng;
      var coords = {x:0, y:0};
      var selTxt = "";
      function showDiv(sender) {
         if (window.getSelection) {
            selObj = {target: sender, start: sender.selectionStart, end: sender.selectionEnd};
            selTxt = sender.value.slice(selObj.start, selObj.end);
         } else {
            selObj = document.selection;
            if (selObj == null) return true;
            selTxtRng = selObj.createRange();
            selTxt = selTxtRng.text;
         }
         var hintDiv = document.getElementById("hint");
         with (hintDiv.style){
            left = (selTxtRng) ? selTxtRng.offsetLeft + "px" : coords.x + "px";
            top = (selTxtRng) ? (selTxtRng.offsetTop - -20).toString() + "px" : (coords.y - 35).toString() + "px";
            display = "block";
            sender.focus();
         } 
      }
      function cutTxt(destInput) {
         if (selObj.clear) {
            selObj.clear();
         } else {
            selObj.target.value = selObj.target.value.slice(0, selObj.start) + selObj.target.value.slice(selObj.end);
         }
         delete selObj;
         document.getElementById("hint").style.display = "none";
         document.getElementById(destInput).value += selTxt.charAt(0).toUpperCase() + selTxt.slice(1);
         selTxt = "";
      }
      function storeCoords(evnt) {
         var ev = (evnt) ? evnt : event;
         coords.x = (ev.x) ? ev.x : ev.pageX;
         coords.y = (ev.y) ? ev.y : ev.pageY;
      }
   </script>
</head>

<body>
<form name="form" action="#">
      Автор: <input type="text" style="width: 200px;" id="selTxtInput1" /><br />
      Название: <input type="text" style="width: 200px;" id="selTxtInput2" /><br />
      Ключ. слова: <input type="text" style="width: 200px;" id="selTxtInput3" /><br />
</form>
      
<form name="FormPopUp" action="#">
      <div id="hint"><center>
      <b>ввести в поле:</b></br>
<input type="button" class="button" value="Автор" onclick="cutTxt('selTxtInput1');" onMouseOver="style.color='#ffcc00'" onMouseOut="style.color='white'" style="cursor:pointer;"/><br />
<input type="button" class="button" value="Название" onclick="cutTxt('selTxtInput2');" onMouseOver="style.color='#ffcc00'" onMouseOut="style.color='white'" style="cursor:pointer;"/><br />
<input type="button" class="button" value="Ключевые слова" onclick="cutTxt('selTxtInput3');" onMouseOver="style.color='#ffcc00'" onMouseOut="style.color='white'" style="cursor:pointer;"/><br />
      </center></div>
      
      <textarea cols="50" rows="15" onselect="showDiv(this);" onmouseup="storeCoords(event);">Василий Петрович Косяков 
Новости политики
правила ввода в текстовое поле 
      </textarea>
</form>
   
</body>
</html>

Автор: Amphiluke 24.9.2009, 12:51

Ответил в http://forum.vingrad.ru/index.php?showtopic=274048&view=findpost&p=1976374, поскольку заметил ее первой.

Автор: YurkaKursant 25.9.2009, 13:04

В общем подскажите плиз как реализовать чтобы, если мы щелкаем вне этого div'a то он скрывается, а если внутри div'a то с ним ничего не происходит. В общем как сделать отследить евенты щелчка по и вне div'а.

Как-нибудь так:

Код


document.onClick = function() {
    if (flag) then function showDiv(sender);
else function closeDiv();}

Код


<div id="hint" onmouseover="flag = true;" onmouseout="flag = false;" ></div>

Автор: Amphiluke 25.9.2009, 13:31

Вот добавьте примерно такое в скрипт

Код


function clickHandler(evnt) {
   var ev = (evnt) ? evnt : event;
   var sender = (ev.target) ? ev.target : ev.srcElement;
   while (sender.parentNode != null) {
      if (sender.id == "hint") return true;
      sender = sender.parentNode;
   }
   document.getElementById("hint").style.display = "none";
}
      
if (window.addEventListener) {
   window.addEventListener("mousedown", clickHandler, false);
} else {
   window.attachEvent("onmousedown", clickHandler);
}
</script>

P.S. Возможно, вам придется немного доработать. Проверял только в FF.

Автор: YurkaKursant 25.9.2009, 22:18

Цитата(Amphiluke @ 25.9.2009, 13:31)

Вот добавьте примерно такое в скрипт

Код


function clickHandler(evnt) {
   var ev = (evnt) ? evnt : event;
   var sender = (ev.target) ? ev.target : ev.srcElement;
   while (sender.parentNode != null) {
      if (sender.id == "hint") return true;
      sender = sender.parentNode;
   }
   document.getElementById("hint").style.display = "none";
}
      
if (window.addEventListener) {
   window.addEventListener("mousedown", clickHandler, false);
} else {
   window.attachEvent("onmousedown", clickHandler);
}
</script>

P.S. Возможно, вам придется немного доработать. Проверял только в FF.

Просто, отлично работает (Opera, NN, FF, Safari, Chrome)!!! А вот в IE не хочет. smile

Автор: Amphiluke 25.9.2009, 23:00

Угу. Наверное, IE хочет этого:

Код


function clickHandler(evnt) {
   var ev = (evnt) ? evnt : event;
   var sender = (ev.target) ? ev.target : ev.srcElement;
   while (sender.parentNode != null) {
      if (sender.id == "hint") return true;
      sender = sender.parentNode;
   }
   document.getElementById("hint").style.display = "none";
}
      
if (window.addEventListener) {
   window.addEventListener("mousedown", clickHandler, false);
} else {
   window.document.attachEvent("onmousedown", clickHandler);
}

Автор: YurkaKursant 25.9.2009, 23:37

Точно, именно этого IE и не хватало!!! smile

Все, закрываю тему. Спасибо огромное за помощь, Amphiluke!

Автор: yu007 16.10.2009, 00:43

А как сделать, чтобы в одна из div-кнопок не вырезала текст а копировала его?

Автор: yu007 22.10.2009, 23:59

Так как сделать копирование одной из кнопок? Помогите, пожалуйста, профи!