Question

我希望在选择任何元素中的任何文本时显示选择列表菜单。我使用了“ onselect”属性，但它似乎仅适用于“ input”元素。当我们在浏览器上右键单击每个元素时，如何显示类似于列表的列表？

当我在输入元素中选择文本时有效，而当我从h1元素中选择文本时无效。

<!DOCTYPE html>
<html>
<body id="myText">

<h1 onselect="myFunction()">Select some of the text: <input type="text" value="Hello world!" /></h1>

<script>
function myFunction() {
  alert("You selected some text!");
}
</script>

</body>
</html>

Answer 1

onselect仅适用于input和textarea-https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onselect。

您可以使用onselectionchange-https://developer.mozilla.org/en-US/docs/Web/API/Document/selectionchange_event。

document.addEventListener('selectionchange', () => {
    const {baseOffset, extentOffset} = document.getSelection();
    const node = document.getSelection().anchorNode;
    if(node) {
        const selectedText = node.data.slice(baseOffset, extentOffset);
        console.log(selectedText);
    }   
});

<h1>Select some of the text: </h1>

Answer 2

您可以使用mouseup事件处理程序和window.getSelection（）以及onselect事件处理程序。
https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

请注意，由于浏览器的原因，从window.getSelection（）中选择的文本略有不同。
在大多数浏览器中，无法从input / textarea元素获取它。
（据我所知，只有Chrome才能同时获得input / textarea和其他元素。）

因此，最好结合使用onselect和mouseup事件处理程序。
在mouseup处理程序中，必须省略input / textarea元素，以防止在某些情况下两次处理选择事件。

<h1>Select some of the text: <input type="text" value="Hello world!" /></h1>

<script>
function myFunction() {
  alert("You selected some text!");
}

document.onselect = function() {
  myFunction();
}

document.onmouseup = function(e) {
  var element = document.elementFromPoint(e.clientX, e.clientY);
  if (!element || (element.tagName == 'INPUT') || (element.tagName == 'TEXTAREA')) {
    return;
  }

  var selObj = window.getSelection(); 
  var selText = selObj.toString();
  if (selText.length == 0) {
    return;
  }

  myFunction();
};
</script>

选择整个页面中的任何文本时，如何显示下拉菜单？

2 个答案: