| |
|
|
| | Есть такая задача: в textarea есть текст. При выделении любого слова, над ним появляется div с кнопкой. Нажатимая на кнопку, при помощи "СелектТекст" надо выделенное слово вставить в текстовое поле , вырезая его из textarea.
У кого есть идеи, подскажите, пожалуйста. Очень нужно. | |
| |
|
|
| |
|
|
| |
для: YU351
(22.09.2009 в 22:43)
| | | Всё в общем-то просто.
1. Вешаете функцию на событие onselect на текстареа.
2. Получаете как положение (для координат всплывающего div'a), так и текст выделенных символов.
Прошу заметить - именно "символов", а не "слова". Выделение может захватить как часть слова, так и больше, чем одно слово. Даже если выделение делать двойным кликом мыши, то "захватится" последующий пробел.
Если вам нужно именно "слово", то надо будет "включить" разбор выделенных символов и "вытаскивание" из них "слова".
3. "Вырезание" слова из текстареа и помещение его в инпут - задача примитивная, суть подсмотреть можете здесь. | |
| |
|
|
| |
|
|
| |
для: АЯ
(23.09.2009 в 01:21)
| | | Вот, что-то похожее:
<!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>
|
Но нужно, чтобы кнопочка появлялась прямо над/под выделением. И чтобы при повторном записывании в текстовое поле предыдущая запись не удалялась, а к ней просто дописывалась следующая. | |
| |
|
|
| |
|
|
| |
для: YU351
(23.09.2009 в 07:00)
| | | С дописыванием разобрался)
document.getElementById("SelTextInput").value += SelText;
|
А вот с div'ом над выделенным словом не получается. Да еще нужно, чтобы сразу 2 или 3 кнопочки было в div, причем по одной слово перемещается в одно текстовое поле, по другой во второе, по третьей в третье. Знает кто-нибудь, как это реализовать? | |
| |
|
|
| |
|
|
| |
для: YU351
(23.09.2009 в 09:21)
| | | Все получилось, вот код:
<!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>
|
| |
| |
|
|
| |
|
|
| |
для: YU351
(24.09.2009 в 11:26)
| | | Есть проблема: В разных браузерах положения div при появлении неприятно удивляет (в разных местах отображается). Как сделать так, чтобы появляющийся div был привязан к координатам мыши (выше или ниже нее)???? | |
| |
|
|
