最近做了几个小网站,想在平时活动的论坛里面宣传一下,操作方式就是在留言时快速添加上自己的小广告。为了方便贴广告,写了一个油猴子脚本。

起先的设计是在页面中添加一个按钮,点击按钮自动将小广告插入到光标的后面。在写的过程中,发现activeElement会不断的变化,不易捕捉光标元素。想想就改成了,点击按钮,把小广告内容送到剪贴板里。

实现原理就是,在页面中放置一个textarea元素,元素里放着小广告,按钮点击事件选择textarea元素内容,送到剪贴板。

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.select(); try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});

参考资料

javascript 拷贝文本的更多相关文章

  1. javascript当文本框获得焦点设置边框

    javascript当文本框获得焦点设置边框:本章节介绍一下当文本框获得焦点以后如何设置文本框的边框样式,本来是一个非常简单的问题,但是有可能前台美工人员对javascript并不是太了解,所以还是通 ...

  2. JavaScript 实现文本编辑器

    JavaScript 实现文本编辑器 最近,我需要做一个非常基本的网页内容编辑功能.我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表, ...

  3. 10个免费的javascript富文本编辑器(jQuery and non-jQuery)

    祝愿园子里的朋友圣诞节快乐. 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascr ...

  4. Javascript富文本编辑器

    分享几款Javascript富文本编辑器 ueditor jqframework xheditor htmlbox kindeditor wymeditor jhtmlarea markitup ck ...

  5. javascript 在线文本编辑器

    javascript 在线文本编辑器实现代码. 效果例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwZmVuZ2h1bw==/font/5 ...

  6. Speech Recognition Grammar Specification Version 1.0 JavaScript TTS 文本发音

    Speech Recognition Grammar Specification Version 1.0 https://www.w3.org/TR/speech-grammar/ W3C Recom ...

  7. 小伙伴们惊呆了!10行 JavaScript 实现文本编辑器

    最近,我需要做一个非常基本的网页内容编辑功能.我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表,对齐等等. 您可能感兴趣的相关文章 分 ...

  8. JavaScript:文本域事件处理

    文本域往往可以输入大量的文字信息,但是在文本域上有一些键盘的处理事件:onkeydown.onkeypress.onkeyup. 范例一:观察文本域的键盘事件处理 代码如下: 效果图如下: 默认状态: ...

  9. 利用javascript实现文本的自动输出

    主要利用了setTimeout(),递归和String.substring(); 做出的效果就像是有一个打字员在打字. <!doctype html> <html lang=&quo ...

随机推荐

  1. jQuery信息提示工具jquery.poshytip (转载)

    转载地址:http://www.helloweba.com/view-blog-123.html Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提 ...

  2. nginx增加ssl服务方法

    1.将申请到的ssl加密证书文件拷贝到nginx的conf目录下 如:server.pem.server.key 2.vim nginx.conf 例子: server { listen 443 ss ...

  3. 必须正确理解的---ng指令中的compile与link函数解析

    这个绝对是深入的知识,但看完之后,对NG的理解就很利害啦. http://www.ifeenan.com/angularjs/2014-09-04-%5B%E8%AF%91%5DNG%E6%8C%87 ...

  4. GDB调试笔记

    参考资料:GDB调试精粹及使用实例 # 调试实例 #include <iostream> #include <cstring> using namespace std; ][] ...

  5. MQ的通讯模式

    1) 点对点通讯:点对点方式是最为传统和常见的通讯方式,它支持一对一.一对多.多对多.多对一等多种配置方式,支持树状.网状等多种拓扑结构. 2) 多点广播:MQ适用于不同类型的应用.其中重要的,也是正 ...

  6. linux socket 编程(C语言)

    转自:http://blog.csdn.net/piaojun_pj/article/details/5920888 最近看了一些网络编程的书籍,一直以来总感觉网络编程神秘莫测,其实网络编程入门还是很 ...

  7. Word2013对公式处理:样式、自动编号、交叉引用

    因快写毕业论文,专门研究了一下Word2013对公式的处理,有一点小心得,记在这里. 文章中公式展示的预期效果是:公式居中,尾端有编号,同时在文章中可以实现引用.实现该效果有很多方法,这里就说一种,其 ...

  8. 【HTML5】Web Workers

    什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性 ...

  9. 字符串集合或字符串数组转换成json数组

    字符串可以是List<String>类型的字符串集合,也可以是String[]类型的字符串数组,二者转换成JSON数组的方式没有什么不同.下面代码注意关键的部分即可(画红线部分). 1. ...

  10. python 代码片段13

    #coding=utf-8 # 条件转化 data=raw_input("enter 'y' or 'n'") if data[0]=='y': print "you t ...