clipboard异步复制文本(动态获取文本)
1、需求描述:
点击“分享”按钮的时候,发送 ajax 请求获得动态邀请连接,成功取得数据后复制到剪贴板
2、解决重点:
> Clipboard 动态设置文本的使用
> Ajax请求设置为同步, 以保证请求数据后,才进行下一步,这里即为 Clipboard 动态设置文本,即复制
3、具体实现代码:
html 部分, 其中 data-id 只是 ajax 的请求参数
<div class="btn" data-id="123">分享</div>
js 部分
;(function() {
var pageCtrl = {
/* 邀请地址生成器 */
_codeGenerator: function(el) {
$.ajax({
url: '/index.php/Proxy/generateProxyCode',
type: 'post',
data: {
serviceId : el.data('id')
},
async: false, //重点,async一定要设置为false,以保证返回数据后才进行下一步的操作
success: function(res) {
$el.data('url', res.data.shareUrl);
}
});
}, /* 复制*/
_clip: function() {
var _self = this,
clipboard = new Clipboard('.btn', {
text: function(el) {
var $el = $(el);
_self._codeGenerator($el); //ajax请求并设置要复制的字符串
return $el.data('url');
}
});
clipboard.on('success', function(e) {
console.log('复制成功,快去分享')
});
}, init: function() {
this._clip();
}
};
$(function() {
pageCtrl.init();
});
})();
clipboard.js 官方说明文档和下载地址 https://www.npmjs.com/package/clipboard
clipboard异步复制文本(动态获取文本)的更多相关文章
- FontMetrics ----- 绘制文本,获取文本高度
Canvas 绘制文本时,使用FontMetrics对象,计算位置的坐标. public static class FontMetrics { /** * The maximum distance a ...
- clipboard让复制的文本换行
https://clipboardjs.com/dist/clipboard.min.js 用clipboard实现复制时, 想让复制的文本换行, 有两咱方法: 第一种, HTML实现: <!- ...
- js/jquery获取文本框的值与改变文本框的值
我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...
- SSRS动态设置文本框属性
SSRS可以通过表达式动态设置文本框所有的属性,比如字体,字号,是否加粗,如下图所示: 汉字和数字英文字母占用的空间不一样,一个汉字占用两个数字和英文字母的空间,VB里有LENB取得字节数,这SSRS ...
- iOS 动态计算文本内容的高度
关于ios 下动态计算文本内容的高度,经过查阅和网上搜素,现在看到的有以下几种方法: 1. // 获取字符串的大小 ios6 - (CGSize)getStringRect_:(NSString* ...
- Word动态替换文本
public class WordTest2 { public static void main(String[] args) { /** 此Map存放动态替换的内容,key-Word中定义的变量,v ...
- 【NLP】Python NLTK获取文本语料和词汇资源
Python NLTK 获取文本语料和词汇资源 作者:白宁超 2016年11月7日13:15:24 摘要:NLTK是由宾夕法尼亚大学计算机和信息科学使用python语言实现的一种自然语言工具包,其收集 ...
- 【实践】js 如何实现动态添加文本节点
对于我这个js 小白来说 今天鼓起勇气做起了邮箱认证这个特效 但是这次不是想说如何实现这这个特效而是想记录一下特效当中的某个部分 那就是向元素节点动态添加文本节点 百度了一下动态添加文本节点的方式 是 ...
- JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)
一.实现效果: 为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数. html & JS: <div> <textare ...
随机推荐
- PAT 1064 Complete Binary Search Tree[二叉树][难]
1064 Complete Binary Search Tree (30)(30 分) A Binary Search Tree (BST) is recursively defined as a b ...
- PAT Battle Over Cities [未作]
1013 Battle Over Cities (25)(25 分) It is vitally important to have all the cities connected by highw ...
- EXTJS 4:在renderer中如何控制一个CheckColumn的行为,如显示,只读等属性
在编写grid下的column时,大家肯定会经常用到renderer这个方法来改变文字的呈现形式,那么如果该column是一个特殊的column,比如CheckColumn时,该方法应该怎样写呢?官方 ...
- cocos代码研究(1)Node学习笔记
理论部分 Node类继承自Ref类,是cocos框架中基础底层的一个封装类,与画面渲染相关的类一般都是继承自该类,例如Scene,Layer,Sprite,Sprite3D,Label,SpriteB ...
- EXT3.0在IE下Range不兼容解决办法
采用EXT3.0创建一个提示框,IE9下显示异常.经过资料查询,发现添加如下代码即可解决问题. // 这段代码是为了兼容IE if ((typeof Range !== "undefined ...
- Python2 简明教程
Python 由 Guido Van Rossum 在90年代初创建. 它现在是最流行的语言之一 我喜爱python是因为它有极为清晰的语法,甚至可以说,它就是可以执行的伪代码. 注意: 这篇文章针对 ...
- python服务器端、客户端的模型,客服端发送请求,服务端进行响应(web.py)
服务器端.客户端的模型,客服端发送的请求,服务端的响应 相当于启动了一个web server install web.py 接口框架用到的包 http://webpy.org/tutorial3.zh ...
- centos7.3安装redis
yum install epel-release yum install redis 如果支持从其他机器能访问,需要修改配置文件 /etc/redis.conf,注释掉 bin 127.0.0.1 如 ...
- Linux基础命令---fold
fold 按照指定的宽度显示文件. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法 fold [选项] fil ...
- Instagram 在 PyCon 2017 的演讲摘要
Instagram 在 PyCon 2017 的演讲摘要 PyCon 简介 PyCon 是全世界最大的以 Python 编程语言 为主题的技术大会.大会由 Python 社区组织,每年举办一次.在大会 ...