To copy the selected Text from a div to a text field on double click the Text

Question

In My Application I have read the text file from a directory and placed it inside a div as mentioned below

     $pageText = fread($fh, 25000); ?>
     <div id="click">Hai
    <?php  echo nl2br($pageText);
      ?> </div>

Now what i have done is , On click on the div it copies the entire text in a div to a text field,This is my javascript for it ,it works perfectly to copy the entire div but now what i need is i want to copy only the selected text from a div to a text field on double click

      <script type="text/javascript">
        $(document).ready( function() {
        $('#click').click(function() { 
        $("#txtMessage").insertAtCaret($(this).text());
        return false
         });

        });

       $.fn.insertAtCaret = function (myValue) {
       return this.each(function(){
       //IE support
       if (document.selection) {
       this.focus();
       sel = document.selection.createRange();
       sel.text = myValue;
       this.focus();
       }
        //MOZILLA / NETSCAPE support
        else if (this.selectionStart || this.selectionStart == '0') {
        var startPos = this.selectionStart;
        var endPos = this.selectionEnd;
        var scrollTop = this.scrollTop;
        this.value = this.value.substring(0, startPos)+           myValue+this.value.substring(endPos,this.value.length);            
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
       } else {
      this.value += myValue;
      this.focus();
      }
      });
      };
      </script>

Ya I think so..Now it copies the entire text of a div to a text field on click ,but i want to copy only the selected text of a div or a single word where i click. — Bharu, Jul 06 '13 at 06:16
go through this link... may be helpful http://stackoverflow.com/questions/400212/how-to-copy-to-the-clipboard-in-javascript — dude, Jul 06 '13 at 06:18
Already My script works perfectly I want to just know where i want to correct the code inorder to copy the selected text.could you guess that dude.. — Bharu, Jul 06 '13 at 06:21
can you provide a jsfiddle link... ad mention what exactly the problem you facing with your code — dude, Jul 06 '13 at 06:23
Wouldn't the selection be unselected when you doubleclick, at least it will for me -> [***FIDDLE***](http://jsfiddle.net/GYuBv/8/) — adeneo, Jul 06 '13 at 06:31

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Here is how to get the selected text with double click,

Update : now it also copies to last focused input.

First you need to set focus one of the inputs before double click the text.

DEMO http://jsfiddle.net/yeyene/GYuBv/15/

$(document).ready(function () {
    $("input[type=text]").focus(function(){
        $("input[type=text]").removeClass('lastFocus');
        $(this).addClass('lastFocus');
    });
    
    $('#myDiv').dblclick(function() {  
        $('#selected').append(getSelectionText());
        $("input[type=text].lastFocus").val($("input[type=text].lastFocus").val()+getSelectionText());        
    });
});

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

$.fn.insertAtCaret = function (myValue) {
    return this.each(function () {
        if (document.selection) {
            this.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            this.focus();
        }
        else if (this.selectionStart || this.selectionStart == '0') {
            var startPos = this.selectionStart;
            var endPos = this.selectionEnd;
            var scrollTop = this.scrollTop;
            this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos, this.value.length);
            this.focus();
            this.selectionStart = startPos + myValue.length;
            this.selectionEnd = startPos + myValue.length;
            this.scrollTop = scrollTop;
        } else {
            this.value += myValue;
            this.focus();
        }
    });
};

It shows the selected text i want to copy the selected text to a text field on double click on the text .do u have any idea for that? — Bharu, Jul 06 '13 at 06:26
check my update answer and see http://jsfiddle.net/yeyene/GYuBv/11/...this will get only one selected text — yeyene, Jul 06 '13 at 06:35
if you want to append all selected texts, see http://jsfiddle.net/yeyene/GYuBv/12/ — yeyene, Jul 06 '13 at 06:36
It works perfectly in Fiddle but i couldn't make it right in my application @yeyene — Bharu, Jul 06 '13 at 06:52
I have another requirement that is i want to copy it to the last focused Text Field ,How to do it Any idea? — Bharu, Jul 08 '13 at 04:20

score 0 · Answer 2 · answered Jul 06 '13 at 06:32

Try this:

$('#click').dblclick(function() {
    var text = '';
    if (window.ActiveXObject) {
        text = document.selection.createRange().htmlText;
    } else {
        text = getSelection().getRangeAt(0);
    }
    $("#txtMessage").insertAtCaret(text);
    return false;
});

To copy the selected Text from a div to a text field on double click the Text

2 Answers2

Update : now it also copies to last focused input.