如何在Twitter分享弹窗中显示选中文本？前端技术求助

架构老林

2026-5-8

如何在Twitter分享弹窗中显示选中的文本？

尊敬的Stack Overflow社区：

您好！我希望在Twitter分享弹窗中显示选中的文本，让用户能清楚知晓即将分享的内容，核心需求是将选中文本展示在id为twitter-share-btn的弹窗div中。

以下是我现有的代码：

JavaScript代码

const selectableTextArea = document.querySelectorAll(".selectable-text-area");
const twitterShareBtn = document.querySelector("#twitter-share-btn");
selectableTextArea.forEach(elem => { 
  elem.addEventListener("mouseup", selectableTextAreaMouseUp); 
});
twitterShareBtn.addEventListener("click", twitterShareBtnClick);
document.addEventListener("mousedown", documentMouseDown);

function selectableTextAreaMouseUp(event) {
  setTimeout(() => { 
    // 避免异常行为
    const selectedText = window.getSelection().toString().trim();
    if(selectedText.length) {
      const x = event.pageX;
      const y = event.pageY;
      const twitterShareBtnWidth = Number(getComputedStyle(twitterShareBtn).width.slice(0,-2));
      const twitterShareBtnHeight = Number(getComputedStyle(twitterShareBtn).height.slice(0,-2));
      if(document.activeElement !== twitterShareBtn) {
        twitterShareBtn.style.left = `${x - twitterShareBtnWidth*0.5}px`;
        twitterShareBtn.style.top = `${y - twitterShareBtnHeight*1.25}px`;
        twitterShareBtn.style.display = "block";
        twitterShareBtn.classList.add("btnEntrance");
      } else {
        twitterShareBtn.style.left = `${x-twitterShareBtnWidth*0.5}px`;
        twitterShareBtn.style.top = `${y-twitterShareBtnHeight*0.5}px`;
      }
    }
  }, 0);
}

function documentMouseDown(event) {
  if(event.target.id!=="twitter-share-btn" && getComputedStyle(twitterShareBtn).display==="block") {
    twitterShareBtn.style.display = "none";
    twitterShareBtn.classList.remove("btnEntrance");
    window.getSelection().empty();
  }
}

function twitterShareBtnClick(event) {
  const selectedText = window.getSelection().toString().trim();
  if(selectedText.length) {
    // Twitter分享通用URL: https://twitter.com/intent/tweet?text={title}&url={url}&hashtags={hash_tags}&via={user_id}
    const twitterShareUrl = "https://twitter.com/intent/tweet";
    const text = `${encodeURIComponent(selectedText)}`;
    const currentUrl = encodeURIComponent(window.location.href);
    const hashtags = "helloworld, test, testing";
    const via = "CodingJrney";
    window.open(`${twitterShareUrl}?text="${text}"&url=${currentUrl}&hashtags=${hashtags}&via=${via}`);
    // 另一种方式：将所有内容放入text字段，更灵活定制推文
    // window.open(`${twitterShareUrl}?text="${text}" by @${via} ${hashtags.split(",").map(h => "%23"+h.trim()).join(" ")} ${currentUrl}`);
    // 也可以指定新窗口属性
    // const newWindowOptions = "height=400,width=550,top=0,left=0,resizable=yes,scrollbars=yes";
    // window.open(`${twitterShareUrl}?text="${text}"&url=${currentUrl}&hashtags=${hashtags}&via=${via}`, "ShareOnTwitter", newWindowOptions);
  }
}

CSS代码

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
}
body { 
  font-family: Arial, Helvetica, sans-serif; 
  background-color: #fff; 
  color: #333; 
  font-size: 1.25rem; 
}
.container { padding: 1.5rem 10rem; }
h1 { font-size: 3rem; margin: 1.25rem 0; }
h2 { font-size: 2rem; }
hr { 
  margin: 3rem 0; 
  border: 0; 
  height: 1px; 
  background: linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)); 
}
p { margin-bottom: 2rem; line-height: 1.75rem; }
#twitter-share-btn { 
  width: 30%; 
  height: 30%; 
  font-size: 1rem; 
  color: #56b8f5; 
  background-color: #fff; 
  cursor: pointer; 
  border: 2px solid #56b8f5; 
  position: absolute; 
  top: 0; 
  left: 0; 
  z-index: 10; 
  display: none; 
  transition: color 0.2s, background-color 0.2s ease-in-out; 
  box-shadow: 0px 0px 1px 5000px rgba(0,0,0,0.8); 
}
#twitter-share-btn:hover { color: #fff; background-color: #56b8f5; }
#twitter-share-btn i { pointer-events: none; }
.btnEntrance { 
  animation-duration: 0.2s; 
  animation-fill-mode: both; 
  animation-name: btnEntrance; 
}
@keyframes btnEntrance { 
  /* zoomIn */ 
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 
  100% { opacity: 1; } 
}
@media(max-width: 992px) { 
  .container { padding: 1.25rem 6rem; } 
  h1 { font-size: 2.5rem; } 
  h2 { font-size: 1.75rem; } 
}
@media(max-width:768px) { 
  html { font-size: 12px; } 
  .container { padding: 1rem 3rem; } 
  h1 { font-size: 2rem; } 
  h2 { font-size: 1.5rem; } 
  hr { margin: 1.5rem 0; } 
}

HTML代码

<h2 class="selectable-text-area">Select the text you want to share</h2>
<hr>
<div class="selectable-text-area">
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae pariatur eos aperiam saepe, beatae necessitatibus exercitationem, nemo, sit provident possimus debitis modi eligendi repellat iure vitae perferendis? Recusandae accusamus placeat velit itaque quis fuga laudantium debitis, ab eaque voluptatum illo esse incidunt! Quia tempore explicabo sint laboriosam rerum nihil voluptates voluptatibus voluptate iure. Earum magnam blanditiis voluptates quod ex exercitationem reiciendis, iure qui ducimus similique impedit nemo est, quisquam facere id adipisci harum tenetur consequuntur illum saepe laudantium. Suscipit facilis corporis natus aperiam! Reprehenderit hic quia natus nisi similique quod fugiat, architecto autem deleniti unde commodi accusamus modi voluptate?</p>
</div>
</div>
<div id="twitter-share-btn">Share This on Twitter: _ _"here i want to show that what text is going to share (means selected text)" _ _</div>

恳请各位帮忙解决该问题，提前感谢！

社区解决方案

搞定这个需求很简单，只需要在选中文字时动态更新按钮内容，同时处理隐藏时的清空逻辑就行，具体修改如下：

调整HTML结构
把按钮里的占位文本换成一个专门的<span>容器，方便后续替换内容：
```
<div id="twitter-share-btn">Share This on Twitter: <span id="selected-text-preview"></span></div>
```
另外还修复了原HTML中多余的</div>标签，让结构更规范。

更新JavaScript逻辑

先获取这个预览元素：

const selectedTextPreview = document.querySelector("#selected-text-preview");

在selectableTextAreaMouseUp函数中，选中文字后把内容赋值给预览元素：

if(selectedText.length) {
  // ... 原有定位代码 ...
  selectedTextPreview.textContent = selectedText; // 新增这行
}

在documentMouseDown函数中，隐藏按钮时清空预览内容：

if(event.target.id!=="twitter-share-btn" && getComputedStyle(twitterShareBtn).display==="block") {
  // ... 原有隐藏代码 ...
  selectedTextPreview.textContent = ""; // 新增这行
}

优化CSS适配内容
原来的按钮用了固定高度，可能放不下长文本，所以调整一下样式提升体验：

#twitter-share-btn { 
  height: auto; /* 改成自动高度适配内容 */
  padding: 1rem; /* 增加内边距让内容更舒展 */
}
#selected-text-preview {
  display: block;
  margin-top: 0.5rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 80px;
  overflow-y: auto;
  color: #333; /* 深色文本更易读 */
}
/* 移动端调整按钮宽度 */
@media(max-width: 992px) { 
  #twitter-share-btn { width: 50%; }
}
@media(max-width:768px) { 
  #twitter-share-btn { width: 80%; }
}

这样修改后，用户选中文字时按钮就会实时显示选中内容，隐藏按钮时也会自动清空，完全满足你的需求啦！

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

如何在Twitter分享弹窗中显示选中文本？前端技术求助

JavaScript代码 #

CSS代码 #

HTML代码 #

社区解决方案 #

JavaScript代码

CSS代码

HTML代码

社区解决方案