我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个“复制”按钮,把一串文字复制到手机剪贴板,如上图所示。

  看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有的需要安装flash,但是这些对于手机等移动设备都不太合适,那么有没有一个简单点的办法呢?

  今天,我们就来介绍一个简单实用的好方法:

    ①首先,我们把需要复制的部分 做成一个readonly的input,

    ②复制按钮的id 我这里设置成:js-copy-text,

    ③js如下:

<script>
$("#js-copy-text").click(function () {
var text = $(this).prev();//就是要复制的那个input
text.select();
document.execCommand('copy', false);
});
</script>

  这样,当我们点击复制按钮的时候,就能将需要的文字复制下来啦~~~

  复制或引用请注明出处哦~~

JS 点击复制按钮 将文字复制到手机剪贴板的更多相关文章

  1. 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  2. PHP——0128练习相关2——js点击button按钮跳转到另一个新页面

    js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么 ...

  3. js点击button按钮跳转到页面代码

    点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick=&q ...

  4. js点击button按钮跳转到另一个新页面

    点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick=&q ...

  5. js点击重置按钮重置表单

    <html><head><script type="text/javascript">function formReset(){document ...

  6. js点击修改按钮后修改

    <button id="click">改变内容</button> <div id="t">要改变的内容</div> ...

  7. js 点击复制文字

    复制input里面的文字 html: <input id="content" class="form-control" type="text&q ...

  8. js 点击复制内容

    <textarea id="pushUrlsTxt" rows="5" cols="55"></textarea> ...

  9. JS 点击复制Copy (share)

    分享自:http://www.cnblogs.com/athens/archive/2013/01/16/2862981.html 1.实现点击按钮,复制文本框中的的内容 1 <script t ...

随机推荐

  1. ClickHouse 快速入门

    ClickHouse 是什么 ClickHouse 是一个开源的面向联机分析处理(OLAP, On-Line Analytical Processing) 的列式存储数据库管理系统. 在一个 &quo ...

  2. js小数处理

    js中的小数处理   先说说Math的几个方法: 1.Math.floor(x)   返回不大于当前数的最大整数. 我的记法:floor 直译 地板  也就是不大于的的意思 (x-0.5 四舍五入取整 ...

  3. Github--账号重新申请与配置

    2017-04-24 最近洗心革面痛下决心要好好再深入学习一番前端,正好加入了一个外包团队接了份单子,外包项目正在如火如荼地进行着,自己也打算趁这个机会来好好学习总结一番. 但是俗话说得好," ...

  4. nginx源码分析——configure脚本

    源码:nginx 1.13.0-release   一.前言      在分析源码时,经常可以看到类似 #if (NGX_PCRE) .... #endif 这样的代码段,这样的设计可以在不改动源码的 ...

  5. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  6. dubbox的provider端嵌套调用问题

    今天遇到了一个问题,查了半天...,情况是这样的,我用的是dubbox,想做一个精简的全链路跟踪,一个消费者通过dubbox调用一个Service, service 里另外调用了两个service: ...

  7. 如何将angular-ui的分页组件封装成一个指令

    准备工作: (1)一如既往的我还是使用了requireJS进行js代码的编译 (2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css ...

  8. django无法加载admin的静态内容的问题(Centos7+Nginx+uwsgi环境下)

    Nginx静态资源无法加载,导致admin没有CSS样式: 这个问题,主要是要理解: 1.Django不会去解析静态内容(css,js,img)等,而是交给Nginx去处理,所以nginx.conf要 ...

  9. ubuntu16.04 编译运行 LSD-SLAM

    下载编译LSDSLAM,可能会出现 CreateGlutWindowAndWind is not a member of pangolin 以及 该函数参数报错的问题: 原因是在新的pangolin版 ...

  10. Power Pivot表属性无法切换回表预览模式的问题

    近期Office365用户升级后解决了在Power Pivot中输入中文的问题,但是同时也带来了一个新的问题就是表属性窗口默认为“查询编辑器”模式,且无法切换回“表预览”模式. 本文和您分享在这种情况 ...