在开发过程中,有时候为方便用户,需要提供点击选中某部分文本并进行复制的操作。借助JQuery可以方便地实现以上需求。
而本篇所讲的是使用纯js的方式进行实现。大体分为两类。
选中文本
针对文本控件(如文本域、输入框)
针对文本控件,其本身有select()方法可供调用,所以处理起来是很方便的,直接定位到目标元素,然后调用其select()方法即可。
示例元素
示例代码
document.getElementById('testSel').select();
针对div等块级元素
对于div等元素,由于其并未提供select()方法,故需要另外实现。以下为博主整理的示例,经供参考。
示例元素
示例代码
/**
* 选择函数
*/
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() 方法进行文本选择。
目前很多网站都采用这样的处理方式,可以规避很多问题,如兼容性问题。