jQuery select on div content

Question

I am making a small text editor, and for that, I would like a similar effect when a user selects some text as here: http://raphaelcruzeiro.github.io/jquery-notebook/

I was thinking of using the jQuery select event, but I can't seem to get it working on divs, only on input fields.

<!--<input type="text" class="writing-area" value="foo bar">-->
<div class="writing-area">foo bar</div>

<script>
$(".writing-area").select(function(){
    alert("Text marked!");
  });
</script>

You can see a demo here: http://jsfiddle.net/WL2nz/ The outcommented HTML works just fine, but the div version does not.

What am I doing wrong? Can select not be used on divs?

REad this : http://api.jquery.com/select/ `:)` `The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes.` and read this: http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse — Tats_innit, Jul 24 '14 at 20:51

score 0 · Answer 1 · answered Jul 24 '14 at 20:50

0

The MDN reference for the select event says that the HTML5 spec only defined the select event for inputs and textareas.

answered Jul 24 '14 at 20:50

Douglas

36,802
9
76
89

score 0 · Answer 2 · answered Jul 24 '14 at 20:50

0

In accordance with jQuery docs, "this event is limited to fields and boxes".

answered Jul 24 '14 at 20:50

André Pavan

101
5

score 0 · Answer 3 · answered Jul 24 '14 at 20:53

From the jQuery page (http://api.jquery.com/select/) for the .select() function:

"The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes."

To get the effect you are look for, have you considered onmouseover or onclick with a clickable element?

In addition, the Dojo Toolkit is one place where you can get a nice tooltip to craft something similar to what you are looking for: click here

score 0 · Answer 4 · answered Jul 24 '14 at 20:55

0

All answers are correct, but the plugin you have linked to, does it this way:

After using the keyboard or the mouse (keyup,focus,mouseup...) the plugin checks if something is select. If something is selected the bubble pops up.

The code is here

answered Jul 24 '14 at 20:55

idmean

14,540
9
54
83

score 0 · Answer 5 · answered Jul 25 '14 at 14:00

we highlighted the color of div text when hovers it and remove the color while non-hover the text.

$(".writing-area").hover(function(){
$(".writing-area").css('color','red');
 },function(){
$(".writing-area").css('color','');
});

http://jsfiddle.net/WL2nz/4/

jQuery select on div content

5 Answers5