Append div to selected text

Question

I want to show some buttons if someone select text in a editable area - like this:

enter image description here

So, I think I have to use <div contenteditable="true"> instead of <textarea>

But to be honest I have no idea how to append the div

Questions:

Whats the (jquery) event for selecting text?
How to append a div after select to this area?

JsFiddle: http://jsfiddle.net/hA7Zn/

Thanks for any hints!

I think that comment is ironic...it´s just a div...there is no try or js... — Top Questions, Jun 16 '14 at 09:43
i have no idea how to start, so no code so far :/ need some hints for the questions above — Aaroniker, Jun 16 '14 at 09:45
You have a function to get selected text here ! http://stackoverflow.com/questions/24081277/detect-what-is-copied-from-webpage-with-jquery/24083504#24083504 — Joffrey Maheo, Jun 16 '14 at 09:48
@JoffreyMaheo thanks, but i dont want to get the selected text only if someone copied it, isnt there any event that fires just after a selection? — Aaroniker, Jun 16 '14 at 09:51
@Aaroniker : Try Google Dictionary chrome extension (https://chrome.google.com/webstore/detail/google-dictionary-by-goog/mgijmajocgfcbeboacabfgobmjgjcoja?hl=en), it exactly works the way you want your to work. Hope it helps. — PG1, Jun 16 '14 at 16:08
@ParagGangil thanks, but i want to write a jquery script for that, so that everyone can use this without the chrome extension — Aaroniker, Jun 17 '14 at 08:24

score 1 · Answer 1 · edited Jun 16 '14 at 09:46

1

Selecting the text:

var text = $('text_element').text();

Selecting the html:

var html = $('text_element').html()

Appending data:

$('appending_element').append(text)

edited Jun 16 '14 at 09:46

King King

61,710
16
105
130

answered Jun 16 '14 at 09:41

Altus

1,315
3
11
19

score 1 · Answer 2 · answered Jun 16 '14 at 09:50

1

If you want to append the div in the end of your div, use .append().

OR

If you want to add your div after some particular div, use .insertAfter().

answered Jun 16 '14 at 09:50

PG1

1,220
2
12
27

score 1 · Accepted Answer · answered Jun 16 '14 at 09:54

1

Check this Demo for getting selected text,

Event selectstart is fired in case of selection

$(function () {
    $('div').on('selectstart', function () {
        console.log('..');
        $(document).one('mouseup', function() {
            alert(this.getSelection());
        });
    });
});

answered Jun 16 '14 at 09:54

Shaunak D

20,588
10
46
79

this is what i searched for (but does not work in firefox) - next i can wrap the selected text with a div and prepend my buttons? – Aaroniker Jun 16 '14 at 10:00
I'm working on it. Succesfull with appending div, but cannot append button. – Shaunak D Jun 16 '14 at 10:02
found this for cross browser support: http://mark.koli.ch/use-javascript-and-jquery-to-get-user-selected-text – Aaroniker Jun 16 '14 at 10:24
That's a great addition to my knowledge. I needed a cross browser solution too – Shaunak D Jun 16 '14 at 10:25

score 0 · Answer 4 · answered Jun 16 '14 at 10:07

May be this code will help you:-

<textarea cols="45" rows="5" id="message">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</textarea>
<script>

$("textarea").click(function(){
    var txt=document.getElementById("message");
    alert(txt.value.substr(txt.selectionStart, (txt.selectionEnd -txt.selectionStart)));
});
</script>

Append div to selected text

4 Answers4