Swift中如何移除文本选择栏默认按钮并添加自定义按钮

要实现选中文本时弹出自定义工具栏、移除默认按钮的效果，核心思路是禁用浏览器自带的文本选择菜单，同时通过JS监听文本选择事件，自定义工具栏并绑定交互逻辑。以下是完整实现步骤：

一、基础结构与样式准备 #

先搭建页面的基础HTML结构，包含文本内容区域和自定义工具栏容器，再用CSS美化工具栏并隐藏默认菜单。

1. HTML 结构 #

<!-- 文本内容区域 -->
<div class="content">
  这里是可选中的文本内容，选中文本后会弹出自定义工具栏...（可以添加更多测试文本，比如段落、列表等，模拟真实页面场景）
</div>

<!-- 自定义工具栏（初始隐藏） -->
<div id="custom-selection-toolbar" class="selection-toolbar">
  <button class="toolbar-btn" id="btn-favorite">⭐ 收藏</button>
  <button class="toolbar-btn" id="btn-share">📤 分享</button>
  <button class="toolbar-btn" id="btn-comment">💬 评论</button>
</div>

2. CSS 样式 #

/* 禁用浏览器默认的文本选择菜单 */
::-webkit-selection-menu {
  display: none !important;
}
::-moz-selection {
  background: #b4d5ff; /* 自定义选中文本的背景色 */
}
::selection {
  background: #b4d5ff;
}

/* 自定义工具栏样式 */
.selection-toolbar {
  position: fixed;
  z-index: 1000;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  padding: 6px;
  display: none;
  gap: 8px;
}

.toolbar-btn {
  border: none;
  background: #f5f5f5;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.toolbar-btn:hover {
  background: #e0e0e0;
}

/* 文本内容区域样式 */
.content {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  font-size: 16px;
  line-height: 1.6;
}

二、JavaScript 核心逻辑 #

通过监听文本选择事件，控制自定义工具栏的显示、定位，并绑定按钮的交互功能。

const toolbar = document.getElementById('custom-selection-toolbar');
const content = document.querySelector('.content');

// 监听文本选择变化事件
document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  const selectedText = selection.toString().trim();

  // 如果没有选中有效文本，隐藏工具栏
  if (!selectedText) {
    toolbar.style.display = 'none';
    return;
  }

  // 获取选中区域的位置信息
  const range = selection.getRangeAt(0);
  const rect = range.getBoundingClientRect();
  
  // 计算工具栏的定位位置（默认显示在选中区域上方，避免超出视口）
  let top = rect.top - toolbar.offsetHeight - 8;
  let left = rect.left + (rect.width / 2) - (toolbar.offsetWidth / 2);

  // 处理工具栏超出视口的情况
  if (top < 0) {
    top = rect.bottom + 8;
  }
  if (left < 0) {
    left = 10;
  } else if (left + toolbar.offsetWidth > window.innerWidth) {
    left = window.innerWidth - toolbar.offsetWidth - 10;
  }

  // 设置工具栏位置并显示
  toolbar.style.top = `${top + window.scrollY}px`;
  toolbar.style.left = `${left + window.scrollX}px`;
  toolbar.style.display = 'flex';
});

// 点击页面其他区域隐藏工具栏并清除选中状态
document.addEventListener('click', (e) => {
  if (!toolbar.contains(e.target) && !content.contains(e.target)) {
    toolbar.style.display = 'none';
    window.getSelection().removeAllRanges();
  }
});

// 绑定自定义按钮的点击事件
document.getElementById('btn-favorite').addEventListener('click', () => {
  const selectedText = window.getSelection().toString().trim();
  alert(`已收藏文本：${selectedText}`);
  toolbar.style.display = 'none';
  window.getSelection().removeAllRanges();
});

document.getElementById('btn-share').addEventListener('click', () => {
  const selectedText = window.getSelection().toString().trim();
  alert(`分享文本：${selectedText}`);
  toolbar.style.display = 'none';
  window.getSelection().removeAllRanges();
});

document.getElementById('btn-comment').addEventListener('click', () => {
  const selectedText = window.getSelection().toString().trim();
  alert(`针对文本“${selectedText}”添加评论`);
  toolbar.style.display = 'none';
  window.getSelection().removeAllRanges();
});

三、关键细节说明 #

• 禁用默认菜单：通过::-webkit-selection-menu隐藏webkit内核浏览器的默认选择菜单，其他浏览器会通过自定义逻辑覆盖默认行为。
• 定位逻辑：利用getBoundingClientRect()获取选中区域的坐标，计算工具栏的位置，同时处理超出视口的情况，保证工具栏始终可见。
• 交互优化：点击页面空白处自动隐藏工具栏并清除选中状态，避免工具栏残留影响操作。

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