200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html文本框监听粘贴 JavaScript实现复制粘贴

html文本框监听粘贴 JavaScript实现复制粘贴

时间:2023-10-14 19:11:56

相关推荐

html文本框监听粘贴 JavaScript实现复制粘贴

有个很常见的生活场景是:我们在网页上阅读一篇文章,移动鼠标,框选一段文字,这个时候文字有了蓝色背景,点鼠标右键,选择复制,就可以把选中的文字复制到剪贴板中。 其实这一小小的行为在 JavaScript 中涉及到如下一些术语:

相关术语

锚点(anchor)

锚点指的是一个选区的起始点,这里的锚点不同于HTML中的锚点链接。当我们使用鼠标框选一个区域的时候,锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时,锚点是不会变的。

焦点(focus)

选区的焦点是该选区的终点,当您用鼠标框选一个选区的时候,焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标,焦点的位置会随着改变。

范围(range)

范围俗称拖蓝,用来表示用户选中的文本区域,即从锚点到焦点的这一段文本区域。

HTMLInputElement 的三种方法

选中文本域中的内容

HTMLInputElement.select()

英文解释为:Selects the input text in the element, and focuses it so the user can subsequently replace the whole entry.

刚认识这个方法的时候,下意识的觉得应该会返回选中的文字才对,然而并没有,这个方法没有返回值,仅仅只是选中了文字而已。

在文本域上设置焦点

HTMLInputElement.focus()

英文解释为:Focus on input; keystrokes will subsequently go to this element.

从文本域上移开焦点

HTMLInputElement.blur()

英文解释为:Removes focus from input; keystrokes will subsequently go nowhere.

值得注意的是以上三种方法都只面向 和 结点,并且都没有返回值。

document.execCommand

文档对象的 execCommand方法允许运行命令来操纵可编辑区域的内容,具体可以查看这里. 下面仅介绍 copy 这个方法:

bool = document.execCommand(copy)

这个方法指拷贝当前选中内容到剪贴板,返回值为一个 bool 值, 如果返回值为 false 则表示操作不被支持或未被启用。

很遗憾的是这个方法的浏览器兼容性一般,IE 仅支持 8 以上的版本。

通过以上几个方法我们已经可以实现简单的复制粘贴功能了:

copy

$('.bt-copy').click(function(){

var copyTarget = $('.box-text');

copyTarget.select();

try {

document.execCommand('copy');

}

catch (err) {

alert('请使用CTRL+C,CTRL+V来复制粘贴~');

}

copyTarget.blur();

})

短短几行代码就实现了复制粘贴的功能,但仍然有改进的地方:

增加除 和 外的结点的支持,可以借鉴 select.js 的实现方法。

对不支持 document.execCommand('copy') 的浏览器使用 ZeroClipboard 作为 fallback。

---------------------------------------- /5/5日 更 ----------------------------------------

之前说过, .select() 方法仅支持 和 元素,发现一个更好的办法用于解决这个问题:

用 js 生成一个隐藏的 元素,追加到 dom 里面。

把需要复制的文本赋值给刚生成的 元素。

使用原生的方法进行选中和复制的操作。

最后记得在DOM中移除 元素。

var textArea = document.createElement('textarea');

textArea.style.position = 'fixed';

textArea.style.left = '-10000px';

textArea.style.top = '-10000px';

document.body.appendChild(textArea);

textArea.value = this.copyText;

textArea.select();

document.execCommand('copy');

document.body.removeChild(textArea);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。