JS selectionchange事件体验实例页面

回到相关文章 »

效果：

尝试选中这段文字：《HTML并不简单》是目前市面上唯一一本围绕HTML展开介绍Web前端开发的书籍，去粗取精，有的放矢。这本书的特点是独家，稀缺，作为业界少有的花大量时间研究与实践HTML的人，里面所呈现的知识是其他地方很难看到的。

代码：

CSS代码：

p {
    color: green;
}
p::before {
    color: #333;
    content: '选中内容是：';
}
p:empty::after {
    content: '-';
    color: darkgray;
}

HTML代码：

尝试选中这段文字：《HTML并不简单》是目前市面上...
<p id="result"></p>

JS代码：

document.addEventListener('selectionchange', function () {
    const selection = document.getSelection();
    result.textContent = selection.toString().trim();    
});