在 textarea 中显示突出显示的文本答案

【问题标题】：Displaying highlighted text in textarea在 textarea 中显示突出显示的文本
【发布时间】：2019-04-11 07:19:51
【问题描述】：

我已经实现了一个代码，当我突出显示一个单词或短语时，它会添加到 textarea 中，但是一旦我单击鼠标，突出显示的文本值就会从 textarea 中消失。

我正在使用 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>

当我突出显示它粘贴在文本框中的文本时，但是当我单击鼠标时，文本会从文本框中消失。建议我做什么？

【问题讨论】：

“只要我点击鼠标”是什么意思？预期的行为是什么？
如果我点击按钮或其他文本框突出显示文本后，突出显示文本的值会消失。
您使用的是document.onclick，这意味着在整个页面上的任何点击都会触发代码。是否可以尝试将 onclick 限制为可以突出显示的文本？

标签： javascript jquery angularjs html

【解决方案1】：

在您单击某处时，所选文本不再存在，因此 text 值将更新为 "" 一个空白字符串。您必须对此进行检查。

您的函数应如下所示： 已编辑：

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();
});

【讨论】：