<!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: 1px 2px 2px 2px;
position: absolute;
width: 117px;
}
.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;
}
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>
</head>
<body>
<form 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>
Selected text #1: <input type="text" style="width: 200px;" id="selTxtInput1" /><br />
Selected text #2: <input type="text" style="width: 200px;" id="selTxtInput2" /><br />
Selected text #3: <input type="text" style="width: 200px;" id="selTxtInput3" /><br />
<textarea cols="50" rows="15" onselect="showDiv(this);" onmouseup="storeCoords(event);">Василий Петрович Косяков дача тачка Новости политики </textarea>
</form>
</body>
</html>
