Putting the data clicked by the user in the text field in the pop up using javascript

Question

The problem that I am currently dealing with is that the user has to enter the text in a text area and after the entering of the text the user is free to click on any of the text that he entered, the clicked text than has to be displayed the popup .Following is the code that is not working as per the above problem stated.

<p id="msg">roli</p>
<form onload>
  <center><label>Enter text:</label><br>
    <textarea style="width:100px; height:100px" id="hello" >

    </textarea>
  </center>
</form>
<script>

  var stopCharacters = [' ', '\n', '\r', '\t']
  $(function() {
    document.getElementById("msg").innerHTML="bhanu";
    $('textarea').on('click', function() {
      var text = $(this).html();
      var start = $(this)[0].selectionStart;
      var end = $(this)[0].selectionEnd;
      while (start > 0) {
        if (stopCharacters.indexOf(text[start]) == -1) {
          --start;
        } else {
          break;
        }                        
      };
      ++start;
      while (end < text.length) {
        if (stopCharacters.indexOf(text[end]) == -1) {
          ++end;
        } else {
          break;
        }
      }
      var currentWord = text.substr(start, end - start);
      alert(currentWord);
    });
  });
</script>

@Praveen Kumar the changes that you suggested didi not seem to make any difference .. can you suggest something again to make the desired thing — DarkNite, Aug 20 '15 at 08:35
I just made it better. I am not in a position to answer this question. If so, I will answer it immediately. Will help you in a different way. `:)` — Praveen Kumar Purushothaman, Aug 20 '15 at 08:38
@PraveenKumar if their is another way to do the problem that I just mentioned above please lt me know asap.. Thanks for your help anyways — DarkNite, Aug 20 '15 at 08:41
I did try using that .. .even that seems to be not working to get the desired results for me — DarkNite, Aug 20 '15 at 08:44
Plain Javascript solution, [demo](http://plnkr.co/edit/0rnbn9rQVX3D5P5NjXbC?p=preview) — Medet Tleukabiluly, Aug 20 '15 at 09:10

Praveen Kumar Purushothaman · Answer 1 · 2015-08-20T08:54:31.703

0

Did you mean like clicking on the same text box will alert the user with the contents of the text box? If so, you don't need any JavaScript or complex stuff which you have done. Click on the below snippet and click on the text box.

var stopCharacters = [' ', '\n', '\r', '\t'];
$(function() {
  $("#msg").html("bhanu");
  $('textarea').on('click', function() {
    if ($(this).val().trim().length == 0)
      return;
    var textComponent = $(this)[0];
    var currentWord;
    // IE version
    if (document.selection != undefined){
      textComponent.focus();
      var sel = document.selection.createRange();
      currentWord = sel.text;
    }
    // Mozilla version
    else if (textComponent.selectionStart != undefined){
      var startPos = textComponent.selectionStart;
      var endPos = textComponent.selectionEnd;
      currentWord = textComponent.value.substring(startPos, endPos)
    }
    alert(currentWord);
  });
});

textarea {display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="msg">roli</p>
<form>
  <label for="hello">Enter text:</label>
  <textarea style="width:100px; height:100px" id="hello" ></textarea>
</form>

edited Aug 20 '15 at 08:54

answered Aug 20 '15 at 08:46

Praveen Kumar Purushothaman

164,888
24
203
252

The code that you have used displays the complete text of the textbox or the textrarea.What I need here is that the user if clicks on the word click than the alert should display click and if the user clicks on the text me then the alert should display me . – DarkNite Aug 20 '15 at 08:49
@DarkNite Okay got it. Give me a minute. This is what a perfect question! – Praveen Kumar Purushothaman Aug 20 '15 at 08:49
@DarkNite Check out the above answer. – Praveen Kumar Purushothaman Aug 20 '15 at 08:54
the above code is giving me popups for sure but it is not giving me the clicked text .. I guess that needs a bit of fixing – DarkNite Aug 20 '15 at 08:57
@DarkNite Updated just now. Have a check. Select a part of text and see? – Praveen Kumar Purushothaman Aug 20 '15 at 08:58
The alert is not displaying the text clicked by the user – DarkNite Aug 20 '15 at 09:00
@DarkNite Try selecting the text? – Praveen Kumar Purushothaman Aug 20 '15 at 09:01
I did try that even that seems to be not giving me the desired output – DarkNite Aug 20 '15 at 09:01
What's the desired output? – Praveen Kumar Purushothaman Aug 20 '15 at 09:03
The desired output is a popup containing the word that the user clicked only once and also the text that is present in the textarea is dynamic and can be changed by the user as per his desire. – DarkNite Aug 20 '15 at 09:05

joyBlanks · Accepted Answer · 2015-08-20T09:21:28.490

0

Here you need to create a range for selection

var stopCharacters = [' ', '\n', '\r', '\t'];
$(function() {
  document.getElementById("msg").innerHTML="bhanu";
  $('textarea').on('click', function() {
    var textComponent = document.getElementById('hello');
    var currentWord;
    // IE version
    if (document.selection != undefined){
      textComponent.focus();
      var sel = document.selection.createRange();
      currentWord = sel.text;
    }
    // Mozilla version
    else if (textComponent.selectionStart != undefined){
      var startPos = textComponent.selectionStart;
      var endPos = textComponent.selectionEnd;
      
      while(textComponent.value.charAt(startPos)!=' '){
        if(startPos<=0)break;
        startPos--;
        console.log(startPos);
      }
      while(textComponent.value.charAt(endPos)!=' '){
        if(endPos >= textComponent.value.length)break;
        endPos++;
        console.log(endPos);
      }
      currentWord = textComponent.value.substring(startPos, endPos);
    }
    alert(currentWord);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="msg">roli</p>
<form onload>
  <center><label>Enter text:</label><br>
    <textarea style="width:100px; height:100px" id="hello" ></textarea>
  </center>
</form>

edited Aug 20 '15 at 09:21

answered Aug 20 '15 at 08:49

joyBlanks

6,419
1
22
47

You have done almost correct, but you forgot to add that, she needs full word. Can you work on it? – Praveen Kumar Purushothaman Aug 20 '15 at 08:52
This is kind of OK but what I want is that the clicked text must be displayed in an alert window and the clicking should be single click – DarkNite Aug 20 '15 at 08:53
added alert to the solution. Please check snippet – joyBlanks Aug 20 '15 at 08:57
The alert is there but the thing is not functioning the way it should – DarkNite Aug 20 '15 at 09:01
Do you want when you click the word should be alert ? or when you click the selected text which you dragged and selected should be alerted? – joyBlanks Aug 20 '15 at 09:03
I want is that when I click on the word all from the input text of "say for ex hello all" than the popup must have the word all – DarkNite Aug 20 '15 at 09:07
Edited the snippet let me know if this works for you – joyBlanks Aug 20 '15 at 09:21

Putting the data clicked by the user in the text field in the pop up using javascript

2 Answers2