代码之家 › 专栏 › 技术社区 › Googlebot

移动浏览器中文本突出显示工具提示的Javascript

mobile-browser javascript

Googlebot · 技术社区 · 6 年前

我想在移动浏览器中选择的文本旁边打开一个工具提示(例如,Android中的Chrome)。因为移动浏览器中的文本选择不会触发鼠标事件,所以我不能使用 mouseup 事件。

document.addEventListener("selectionchange", function(event) {

    var text = window.getSelection().toString();
    var tooltip = document.getElementById('tooltip');
    var x = event.clientX; // The problem
    var y = event.clientY; // The Problem
    tooltip.innerHTML = text;
    tooltip.style.top = x + 'px';
    tooltip.style.left = y + 'px';
});

问题是 ClientX ClientY 不使用 selectionchange .

JSFiddle

2 回复 | 直到 6 年前

skyline3000 6 年前

你可以得到 bounding rect 并基于该数据放置工具提示。矩形将告诉您选择的宽度、高度、x、y、顶部、右侧、底部和左侧。

document.addEventListener("selectionchange", function(event) {
  const selection = window.getSelection();
  
  if (selection.rangeCount === 0) {
    return;
  }

  const range = selection.getRangeAt(0);
  const rect = range.getBoundingClientRect();
  const text = selection.toString();
  const tooltip = document.getElementById('tooltip');

  tooltip.innerHTML = text;
  tooltip.style.top = rect.bottom + 5 + 'px'; // 5px offset
  tooltip.style.left = rect.x + 5 + 'px';     // 5px offset
  tooltip.style.position = 'absolute';
  tooltip.style.background = 'lightgreen';
});

This is some text
<div id="tooltip">

Nimitt Shah 6 年前

您可以添加mouseup事件并在mouseup事件处理程序中执行该代码。

var tooltip = document.getElementById('tooltip');
document.addEventListener("selectionchange", function(event) {
    var text = window.getSelection().toString();
    tooltip.innerHTML = text;
});

document.addEventListener("mouseup", function(event){
    var x = -1000;
    var y = -1000;
    if(tooltip.innerHTML!=""){
        x =event.clientX;
        y = event.clientY;
    }
    tooltip.style.top = x + 'px';
    tooltip.style.left = y + 'px';
});

jsFiddler 也。