Перемещаем выделенный текст

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем -, 22 сен 2009.

  1. Гость

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

    Проблема решена. Вот код:

    Код (Text):
    <!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>
     
Загрузка...
Похожие Темы - Перемещаем выделенный текст
  1. susinmn
    Ответов:
    78
    Просмотров:
    28.671

Поделиться этой страницей