在文本区域中显示突出显示的文本

Question

I have implemented a code that when i highlight a word or phrase it is added in the textarea but as soon as I click on the mouse the highlighted text value goes from the textarea.

I am implementing this using Angularjs.

This is my HTML & Angularjs code:


<div ng-app="myApp" ng-controller="caseCtrl">
<form name="aform" >
<textarea id="sel" rows="5" cols="20"></textarea>
</form>
 <div>
  <p>highlight the text to paste it in textbox.</p>
</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('caseCtrl', function($scope) {
 function getSelectionText() {
    var text = "";   
   if ((activeElTagName == "textarea")) {        
    } else if (window.getSelection) {
        text = window.getSelection().toString();
    }
  return text;
  }

  document.onclick = function() {
    document.getElementById("sel").value = getSelection();
       };
         });
    </script>

when i highlight the text it is pasted in textbox but when i click on the mouse the text gets disappeared from textbox. Suggest me what to do ?

Answer 1

In your case when you click somewhere, the selected text no longer exists, so text value gets updated to "" a blank string. You will have to put a check for that.

Your function should look like: Edited:

var text2 = "";
function getSelectionText() {
    var text = "";   
    if (window.getSelection) {
        text = window.getSelection().toString();
        console.log(text.length);
        if(text.length!=0) {
            text2 =text;
        }
    }
    return text2;
}

document.addEventListener("click", function() {
    document.getElementById("sel").value = getSelectionText();
});