Typescript getSelection 消失

Question

在 Vue 和 typescript 中，我有自己的上下文菜单：

<context-menu id="context-menu" ref="ctxMenu">
      <li @click="ctxMenuClickItem1($event)" v-on:mouseover="menuItemMouseover($event)" v-on:mouseleave="menuItemMouseleave($event)" v-bind:style="getMenuItemStyle()" >Open in TMS</li>
      <li @click="ctxMenuClickItem2($event)" v-on:mouseover="menuItemMouseover($event)" v-on:mouseleave="menuItemMouseleave($event)" v-bind:style="getMenuItemStyle()" >Open in OnDemand</li>
      <li @click="doCopy()" >Copy</li>
    </context-menu>

当我在页面上选择文本然后单击上下文菜单中的第三项 (doCopy) 时，选择消失了。

复制功能看起来像这样：

 doCopy: function () {
  debugger;
  var selection = window.getSelection();
},

点击后选择为空：selection.toString() is ""

如何复制选中的文字？

Answer 1

当您在上下文菜单中单击时，您的 selection 正在折叠（或重置）可能是因为移动了焦点。你需要在'contextmenu'事件触发时得到一个selection，并在doCopy中恢复selection。 JS 示例：

var range = document.createRange();
docucment.addEventListener('contextmenu', (ev) => {
    let selection = window.getSelection();
    if(selection.rangeCount > 0) {}
    range = selection.getRangeAt(0);
})
doCopy = function(){
  let selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('copy');//save selection in buffer

}

如果您 select 在 contenteditable 元素中输入文本，则需要在该元素中设置焦点。

Typescript getSelection 消失

Typescript getSelection disappear

javascript

typescript

getselection