首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS实现一键点击按钮复制文本

背景描述现在有这样一个需求,想要在页面实现点击按钮,一键复制指定列表字段内容的操作,就像这样的效果复制成功之后的内容在Notepad++ 粘贴可以看到正式列表中链接地址字段的内容,那么如何实现一键点击按钮复制指定列字段内容的操作呢...,下面我们来看具体的页面代码实现。...JS代码实现首先来看页面按钮点击事件对应的方法在点击 复制链接 按钮时需要传入您想要复制的字段内容,这里通过 row.url 取值 copylink() 方法内容如下function copylink(...; } }这里我们用到了一个 copyText() 方法,下面来看我们这个方法的详细实现,里面每一行代码我都做了注释,方便阅读 /** * 复制文本到剪贴板 * @...大家有需要的可以放心拿去用,这里我已经验证过是好用的。总结总的来说这个基于 JavaScript 实现页面点击按钮一键复制文本的操作还是比较简单的,但是可能功能不太常用,容易遗忘。

27120
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    一键点击链接(按钮)下载js(jquery.qrcode)生成的二维码图片

    有时候觉得已经生成了二维码图片,直接打印就行了,但是用户总有新需求诞生,于是用户说每次保存二维码的图片,都需要右键点击,然后另存为,能不能直接一个按钮点一下就下载这个二维码呢?...能不能直接把二维码图片的名称也在保存的时候自动生成?我的上帝呀,你可以知道你的这么一个小小的要求,我需要折腾多久吗?没错,困扰了1周,最后思考了半天,弄了2个小时程序,才实现了。...中间走了不少弯路,期间参考了《点击按钮保存网页中指定的图片,利用js实现》,可惜jquery.qrcode所生成的图片(我用的是image的渲染方式,因为只有这种方式打印的时候能被直接默认打印出来,canvas...="保存" onclick="save();" /> js...保存" /> 于是百度、Google访问外国网站,终于寻得base64图片一键下载的一些思路,于是诞生了以下可执行的代码。

    4.8K20

    【ABAP】 如何实现点击不同按钮动态显示不同的选择屏幕?(附完整示例代码)

    在实际业务中我们经常会碰到这种情景:一个选择屏幕界面需要根据用户点击的按钮不同来动态显示不同的界面元素,本文就来详细讲解一下实现的过程。...这些按钮被分组到名为 rad1 的单选按钮组中。 DEFAULT 'X' 表示默认情况下选中了 P1 单选按钮。这意味着在选择屏幕初始化时,P1 单选按钮将被选中。...USER-COMMAND uc定义了PAI事件,如果没有该语句则点击按钮将毫无作用。 3....总的来说,这段代码的实现思路是根据用户在选择屏幕上选择的单选按钮(P1 或 P2)来控制不同组的选择选项和参数的可见性和活动状态。...写在最后的话   本文花费大量时间介绍了如何实现点击不同按钮动态显示不同的选择屏幕,希望能帮助到各位小伙伴,码文不易,还望各位大佬们多多支持哦,你们的支持是我最大的动力!

    1.5K30

    纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮

    之前发过文章说过:使用 Prism.js 实现漂亮的代码语法高亮,本博客也使用的是它 直接写代码发布的话,灰茫茫一片,很丑,所以有了 Prism.js 引用的代码片段就变得有了好看的样式 但是作为技术博客,每篇文章基本上都会有代码,而 Prism 使用语义化的 元素和 元素来标记代码区块,每次都要手动敲的话还是很麻烦的 所以这篇文章就是一个小技巧,怎么在 WordPress...文章编辑器上增加 Prism.js 代码高亮的快捷按钮 打开你的 functions.php 文件,加入以下代码 // 自定义代码高亮按钮 function appthemes_add_quicktags...,切换到文本模式 纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮 直接点击编辑器上的按钮,就可以添加对应的片段,不用每次费事的一个一个敲了 沈唁志,一个...原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮

    2.4K10

    百度站长链接提交的js代码推送进化版

    百度站长平台提供链接索引的自动提交 JS 脚本已经有一段时日了。用百度自己的话讲:JS 链接推送代码以网页为最小对象,服务于全平台多终端,PC 站和移动站均可使用。...安装代码的页面在任意平台(浏览器、微信、微博)被加载时,页面链接会被第一时间推送给百度,从而提高站点新内容的发现速度。...原来的代码长这样: //百度 JS 链接推送代码 (function(){ var bp = document.createElement('script'); var curProtocol...,每当用户访问这些页面时,就会通过这段脚本从百度下载一个 1×1 的 gif,同时记录页面此时此刻的 URL 地址。...原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:百度站长链接提交的js代码推送进化版

    2.4K60

    Chrome插件开发教程

    2.选中界面右上角的开发者模式3.点击左上角的加载已解压的扩展程序,并选中刚才的插件文件夹插件已经成功载入。可以点击扩展程序按钮,鼠标移动到插件右侧的固定按钮,固定到标签栏里。...标签栏多了个icon图标,点击可唤出插件的popup界面:插件不会热更新,记得每次修改代码后点击刷新icon载入最新代码添加功能我们将实现一个简易版的历史记录插件。..."permissions": ["storage"] ...}复制代码点击server worker链接打开devtools界面,即可看到日志信息:添加历史界面这里,我们选择popup的交互形式:..."content_scripts": [ { "matches": ["*://*/*"], "js": ["content/index.js"] } ]}复制代码插件目录里新增目录...如果百度云链接失效了的话,请留言告诉我,我看到后会及时更新~开源地址码云地址:http://github.crmeb.net/u/defuGithub 地址:http://github.crmeb.net

    1.4K10

    网页上的复制与剪切

    你可以决定哪些文本被复制到剪切版。之后我们会详细阐述。 一个简单的例子 让我们来增加一个按钮,点击这个按钮会拷贝一个email地址到用户的剪切版。...我们在网页里面添加一个email地址和一个按钮,点击按钮会拷贝email地址: Email me at js-emaillink" href="mailto:matt@example.co.uk...在事件监听器中我们通过class js-emaillink选中email地址,然后执行拷贝命令,然后用户的剪切版里面就会有email地址了。...Selection API的window.getSelection()方法选中链接的文本。...已知问题 直接用js代码调用 queryCommandSupported() 会一定会返回false,除非将其放在用户操作的回调函数中执行。这导致了你不能在浏览器不支持时禁用按钮。

    1.5K20

    接口测试平台代码实现10:菜单页面升级

    那我们继续修改js的这个函数,让这个按钮本身移动到最左边,并且文案改成‘显示’ btn就是我们的这个控制按钮,点击后,把它的外左边距变成0px,就是紧贴左边,然后它的文案改成 ‘显示了’;让我们刷新页面再点击看看效果...我们要继续修改这个js函数,让其点击之前进行一个判断。如果此时按钮的文案是 隐藏,那么就去执行我们刚写好的隐藏的这一段,如果此时按钮的文案不是隐藏而是显示,那么就去执行新的一段让菜单显示的代码。...另一种简单,直接去网上复制一个文案图标粘贴进来 颜色啥的随意: 给大家一个好网址: http://www.fhdq.net/ 这里随便复制粘贴即可,有很多页,我随便复制一个,粘贴进代码 刷新页面:...然后我们要介绍如何让这个按钮一点击就回到主页: 也就是点击跳转到:/home/ 正常的方法我们是可以写一个a标签 超链接。但是现在我们做的是一个button标签的按钮,那么怎么操作呢?...结果就是我们用a标签把按钮给包裹起来即可: 此时点击这个按钮,就是会跳转到a标签的href的链接中了。

    2K30

    接口测试平台代码实现35:请求体

    div 里面的 下半部分大div 内的 form-data小div 内,写上以下代码: 代码的含义大家不用深究,毕竟是第三方的组件。...样式我稍微调过,大家可以直接复制代码: <table class...先看看页面效果: 我们可以简单测试一下 三个按钮的功能: 添加: 删除和编辑点击报错了,如果有报错。...大家不要慌,这是第三方的代码里作者写了一个严格语法标记的问题,我们找到删除即可: 打开bootstable.js 你会看到顶部有一个字符串:use strict 我们删除这行。...然后回去刷新页面再测试一下: 点击编辑按钮,那个小铅笔标志的,该行就进入到编辑状态,我们修改后,点击对号按钮,即可修改成功。 然后我们点击删除按钮 测试一下: 删除也成功了。

    74830

    你的 Link Button 能让用户选择新页面打开吗?

    缺点很明显用户根本无法选择在新页面or本页面打开,只能接受你的实现。用户根本不知道点击按钮后会发生什么。...除了天然支持新页面打开,还有些好处:鼠标Hover上去时,浏览器会提示新页面地址,并且也能直接右键复制地址,便于分享!但是!...该问题很好解,把你按钮样式复制一份,或者把相关class放到标签上,就基本一样了,如果还有样式差异,就再覆盖一下的默认样式(大多数浏览器会给它设置字体颜色、下划线这2个默认样式):a, a:...某个按钮,直接点击时是window.history.back(),但也允许新窗口打开上个页面地址(这个问题更加复杂,请期待我的下篇文章,会做详细讲解)现在我想告诉你:这些问题,也是有解的!...event.preventDefault()如果用户只是普通的左键点击了链接,没按任何xxxKey,就应该阻止标签默认行为,由我们的JS去接管,自由操控跳转。

    6.9K171
    领券