代码之家 › 专栏 › 技术社区 › 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 也。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

3 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

3 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

3 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

3 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前