如何在选中页面任意文本时显示下拉菜单？解决onselect仅支持input问题

嘿，我懂你的困扰——onselect 属性确实只对表单类元素（比如 input、textarea）生效，普通块级元素像 h1、p 这类根本不吃这一套。要实现页面任意元素选文本都弹出自定义菜单，咱们得换个思路，通过监听全局的选择事件来搞定。下面给你两种实用的实现方案：

方案一：监听鼠标松开事件（适合鼠标选文本场景） #

这个方案通过监听全局 mouseup 事件，在用户松开鼠标后检查是否有选中的文本，然后显示自定义菜单。

<!DOCTYPE html>
<html>
<body id="myText">
  <h1>Select some of the text: <input type="text" value="Hello world!" /></h1>
  <p>试试选中这段普通段落的文本看看效果</p>

  <!-- 自定义菜单（默认隐藏） -->
  <div id="customMenu" style="display:none; position:absolute; background:white; border:1px solid #ccc; padding:8px; border-radius:4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">
    <button onclick="copySelectedText()">复制选中内容</button>
    <button onclick="alertSelectedText()" style="margin-left:8px;">查看选中内容</button>
  </div>

  <script>
    const customMenu = document.getElementById('customMenu');

    // 鼠标松开后检查是否有选中文本
    document.addEventListener('mouseup', (e) => {
      const selectedText = window.getSelection().toString().trim();
      if (selectedText) {
        // 把菜单定位到鼠标位置
        customMenu.style.left = `${e.pageX}px`;
        customMenu.style.top = `${e.pageY}px`;
        customMenu.style.display = 'block';
      } else {
        customMenu.style.display = 'none';
      }
    });

    // 点击页面其他区域隐藏菜单
    document.addEventListener('click', (e) => {
      if (!customMenu.contains(e.target)) {
        customMenu.style.display = 'none';
      }
    });

    // 复制功能
    function copySelectedText() {
      const selectedText = window.getSelection().toString();
      navigator.clipboard.writeText(selectedText).then(() => {
        alert('已复制到剪贴板！');
      });
      customMenu.style.display = 'none';
    }

    // 弹窗查看功能
    function alertSelectedText() {
      alert(`你选中的文本是：${window.getSelection().toString()}`);
      customMenu.style.display = 'none';
    }
  </script>
</body>
</html>

方案说明： #

1. 先创建一个默认隐藏的自定义菜单，你可以根据需求添加按钮或样式
2. 全局绑定 mouseup 事件，通过 window.getSelection() 获取选中的文本
3. 如果有选中内容，就把菜单定位到鼠标位置并显示；没有则隐藏
4. 绑定全局 click 事件，点击菜单外的区域自动隐藏菜单，避免菜单一直停留

方案二：监听选择变化事件（覆盖鼠标+键盘选文本场景） #

如果想支持键盘选文本（比如按住 Shift+方向键），可以用 selectionchange 事件，它会在选中文本发生变化时立即触发，覆盖场景更全面。

<!DOCTYPE html>
<html>
<body id="myText">
  <h1>Select some of the text: <input type="text" value="Hello world!" /></h1>
  <p>用键盘或者鼠标选中这段文本试试</p>
  <div id="customMenu" style="display:none; position:absolute; background:white; border:1px solid #ccc; padding:8px; border-radius:4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">
    <button onclick="handleMenuAction('copy')">复制</button>
    <button onclick="handleMenuAction('alert')" style="margin-left:8px;">查看</button>
  </div>

  <script>
    const customMenu = document.getElementById('customMenu');

    // 监听选中文本变化
    document.addEventListener('selectionchange', () => {
      const selectedText = window.getSelection().toString().trim();
      if (selectedText) {
        // 获取选中区域的位置，把菜单定位到选中区域右下角（比鼠标位置更精准）
        const selection = window.getSelection();
        const range = selection.getRangeAt(0);
        const rect = range.getBoundingClientRect();
        customMenu.style.left = `${rect.right + window.scrollX}px`;
        customMenu.style.top = `${rect.bottom + window.scrollY}px`;
        customMenu.style.display = 'block';
      } else {
        customMenu.style.display = 'none';
      }
    });

    // 点击外部隐藏菜单
    document.addEventListener('click', (e) => {
      if (!customMenu.contains(e.target)) {
        customMenu.style.display = 'none';
      }
    });

    // 统一处理菜单按钮动作
    function handleMenuAction(action) {
      const selectedText = window.getSelection().toString();
      if (action === 'copy') {
        navigator.clipboard.writeText(selectedText).then(() => alert('复制成功！'));
      } else if (action === 'alert') {
        alert(`选中的文本：${selectedText}`);
      }
      customMenu.style.display = 'none';
    }
  </script>
</body>
</html>

额外优化建议： #

• 如果想禁用浏览器默认右键菜单，可以加一行代码：document.addEventListener('contextmenu', (e) => e.preventDefault());
• 表单元素（input/textarea）的选中内容也能被 window.getSelection() 获取，所以这两个方案都能覆盖表单场景
• 可以给菜单加更多样式（比如 hover 效果、自适应宽度），让它更接近原生右键菜单的体验

内容的提问来源于stack exchange，提问作者ahmer