JavaScript - 在鼠标悬停时选择范围文本

标签 javascript jquery html

我有这个 HTML 代码。

<div class="dontsplit" onmouseover="selCode('c111');">
  Face savoring delicious food <span class="notranslate" id="c111">😊</span>
</div>

当鼠标悬停在 div 上时,我想选择 span 标签之间的值。我正在使用的代码是这样的。

function selCode(objId) {
    if(document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(objId));
        range.select();
    } else if(window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(objId));
        window.getSelection().addRange(range);
    }
}

但是好像不行。我如何获得这项工作?

我再说一遍。当鼠标悬停在 div 上时,我需要自动选择 span 之间的文本。所以可以很容易地复制。提前致谢!

最佳答案

您的脚本适用于第一次鼠标悬停,但第二个向内的鼠标悬停会给出错误不支持不连续选择。因此请在进行新选择之前清除现有选择。

function selCode(objId) {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(objId));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(objId));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}

演示:Fiddle

关于JavaScript - 在鼠标悬停时选择范围文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28824227/

相关文章:

jquery - Shopify Ajax API -/cart/update.js 无法更新产品数量

javascript - 让条形图行在 D3 中显示不同转换率的任何方法

javascript - 仅隐藏和显示直接子项的第 n 项之后的 div 列表项

javascript - jQuery 幻灯片的优化

html - 如何使这两个元素彼此相邻

html - 如何在网站上使用 Google 的 Roboto 字体?

javascript - Glitchy-Freezing - 滚动动画不流畅 - 使用 requestAnimationFrame

javascript - TinyMCE:检测 onLeave()

javascript - 用于匹配文本的正则表达式仅包含空格和 br 标记

javascript - 如何使用 AngularJS 上传文件并使用 ExpressJS 保存?