highlight data into popup in javascript

Question

How to get the mouse hovered text from the textarea and display the content on a popup window using the javascript.In this the user as the freedom to select and hover any text but the text must be a string only and can't be a number or a special symbol , etc present in the textarea. The code is as follows

Enter text:

                                <br>
                                output:
                                    <span id="out"></span>
                                </div>
                                <script>
                                    function ShowSelectionInsideTextarea()
                                    {
                                        var textComponent = document.getElementById('Words');
                                        var selectedText;
                                        // IE version

                                        if (document.selection != undefined)
                                        {

                                            textComponent.focus();
                                            var sel = document.selection.createRange();
                                            selectedText = sel.text;


                                        }
                                        // Mozilla version
                                        else if (textComponent.selectionStart != undefined)
                                        {
                                            var startPos = textComponent.selectionStart;
                                            var endPos = textComponent.selectionEnd;
                                            selectedText = textComponent.value.substring(startPos, endPos)
                                            window.alert("hello");
                                        }


                                        document.getElementById("out").innerHTML = selectedText;

                                    }

                                    setInterval(ShowSelectionInsideTextarea, 1000);
                                </script>

The problem here is that the alert is not getting the mouse hovered text and is not being displayed.What to do in this case

what do you mean "highlighted"? what did you try so far? code? — messerbill, Jul 31 '15 at 11:41
Search for the posts of the user Tim Down, those will suit all your needs. http://stackoverflow.com/users/96100/tim-down — Mouser, Jul 31 '15 at 11:42
see my answer below with updated link https://jsfiddle.net/jve4eehh/6/ — BhavO, Aug 05 '15 at 08:38

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

Inspired by: How to get selected text from textbox control with javascript

Here you go:

function getSelectionInsideTextarea(textComponent)
{
  var selectedText;

  if (document.selection != undefined)
  {
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }
  else if (textComponent.selectionStart != undefined)
  {
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos)
  }

  return selectedText;
}

var textArea = document.getElementById('mytextarea');
textArea.onselect = function(){ alert(getSelectionInsideTextarea(textArea)); };

Working example:

https://jsfiddle.net/jve4eehh/6/

edited May 23 '17 at 11:51

Community

1
1

answered Jul 31 '15 at 11:50

BhavO

2,406
1
11
13

What I mean by the highlighted text is that it should be selected by the user by using the mouse selection – DarkNite Aug 03 '15 at 04:29
Yes it is, please see link in answer – BhavO Aug 03 '15 at 06:31
thanks .. @BhavO pls see the code .. maybe u can help me in a better manner ..Thanks for the help in advance – DarkNite Aug 05 '15 at 06:29
can u pls help with this new update .. thanks for the last one anyways – DarkNite Aug 05 '15 at 12:03
how can I help, just use the solution i have given https://jsfiddle.net/jve4eehh/6/ – BhavO Aug 05 '15 at 12:05

highlight data into popup in javascript

1 Answers1