js选择和复制html中的文本

在开发过程中,有时候为方便用户,需要提供点击选中某部分文本并进行复制的操作。借助JQuery可以方便地实现以上需求。

而本篇所讲的是使用纯js的方式进行实现。大体分为两类。

选中文本

针对文本控件(如文本域、输入框)

针对文本控件,其本身有select()方法可供调用,所以处理起来是很方便的,直接定位到目标元素,然后调用其select()方法即可。

  • 示例元素
<textarea id="testSel"></textarea>
  • 示例代码
document.getElementById('testSel').select();

针对div等块级元素

对于div等元素,由于其并未提供select()方法,故需要另外实现。以下为博主整理的示例,经供参考。

  • 示例元素
<div id="testSel"></div>
  • 示例代码
/**
* 选择函数
*/
function selectText(element) {
    var text = document.getElementById(element);
    if (document.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    } else {
        console.log('none');
    }
}

//使用示例
selectText('testSel');

此示例只是简单演示,可以根据需求更改 selectText 函数,使其更完善更强大,比如针对class、id做适配等

复制

以上完成了文本选择操作,接下来就是复制操作了。使用以下代码即可完成复制。

document.execCommand("Copy");

拓展

了解了以上知识,对于div等元素,实现复制,可以转变一下思路,在用户点击复制交互的时候,使用文本控件呈现,控件内容为div内文本内容(即展示一个正常情况下隐藏的文本控件,原始的div或覆盖或隐藏),这样,就可以使用文本控件的 select() 方法进行文本选择。

目前很多网站都采用这样的处理方式,可以规避很多问题,如兼容性问题。

It's
欢迎访问本站,欢迎留言、分享、点赞。愿您阅读愉快!
*转载请注明出处,严禁非法转载。
https://www.devsong.org
QQ留言 邮箱留言
头像
引用:
取消回复
提交
涂鸦
涂鸦
热门