创建不带输入文本框的复制按钮

2024-03-03

我需要一些 JavaScript 来制作一些文本,以便在您单击按钮时复制您的剪贴板。我已在下面附加了按钮 HTML。注意:我有多个按钮。

<button id="TextToCopy"><img src="button_image.png" onclick="ClipBoard(this)"></button>

我正在考虑为每个按钮做一个这样的 if 语句,但不知道如何复制文本。

    function ClipBoard(x) {
if (x.id == "TextToCopy")
var copyText = "TextToCopy";

你可以使用这种函数来做到这一点:

(请注意,由于您不应该使用内联 JavaScript,因此我删除了您的onclick在 HTML 中。)

function Clipboard_CopyTo(value) {
  var tempInput = document.createElement("input");
  tempInput.value = value;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand("copy");
  document.body.removeChild(tempInput);
}

document.querySelector('#Copy').onclick = function() {
  Clipboard_CopyTo('Text to copy!');
}
<button id="Copy">Copy “Text to copy!” to clipboard</button>
<br><br>
<input placeholder="Paste here, to try!">

此函数创建一个临时输入,复制文本后将其删除。

希望能帮助到你。

⋅ ⋅ ⋅

对于多行文本,textarea可以使用。

function Clipboard_CopyTo(value) {
  var tempInput = document.createElement("textarea");
  tempInput.value = value;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand("copy");
  document.body.removeChild(tempInput);
}

document.querySelector('#Copy').onclick = function() {
  Clipboard_CopyTo('Text to copy\non multiple lines.');
}
<button id="Copy">Copy to clipboard</button>
<br><br>
<textarea placeholder="Paste here, to try!"></textarea>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

创建不带输入文本框的复制按钮 的相关文章

  • 更改模板标签 <# {% {{ 等后,John Resig 的微模板出现语法错误

    我在使用 John Resig 的 Micro 模板时遇到了一些麻烦 谁能帮我解释为什么它不起作用 这是模板 以及发动机的改装部分 str replace r t n g split join t replace gt t g 1 r re
  • 基于 json 文件动态显示选择、复选框、日期选择器等

    对我之前的问题的补充 我根据 json 文件动态显示输入字段 现在我想根据它们的组显示选择项 复选框和日期选择器 我如何解决这个问题 我需要将这些元素推入computeJSON 但写入例如选择options item selection不管
  • Javascript:更改浏览器后退按钮的功能

    有没有办法让用户的浏览器上的后退按钮调用 JavaScript 函数而不是返回页面 您无法覆盖这样的行为 如果用户通过链接访问您的页面 则单击 后退 将使他们再次离开该页面 但是 您可以使页面上的 JavaScript 操作将条目添加到历史
  • 使用“SVG 多边形”悬停状态在“SVG”之后淡入 div

    有没有一个只用CSS来解决这个问题的方法 我希望能够在 SVG 之后淡入 div 但前提是用户将鼠标悬停在 SVG 多边形上 代码看起来像这样
  • jQuery 提交未触发

    我觉得问这个很愚蠢 但为什么我的 submit 没有发出警报 HTML div class buttonbar style margin left 10 div
  • 如何禁用向左滚动?

    I got a div 元素 parent 包含多个子元素 item 我想启用滚动父元素一个方向 left OR正确的 否则什么都不会发生 看我的代码 parent scroll function gt gt gt scroll event
  • 单击 div 中的图像时如何翻转该 Div?

    好吧 我对编写 Javascript 知之甚少 我可以对其进行一些编辑 并且涉足了 CSS3 动画 我将向您展示我正在努力实现的目标 然后在下面进行解释 网站布局将是这样的 https i stack imgur com RMb4R jpg
  • 根据复选框显示/隐藏输入字段[重复]

    这个问题在这里已经有答案了 如果单击该复选框 它将显示一个输入字段 到目前为止它正在工作 但如果未选中该复选框 它应该隐藏它 我该怎么做 div class checkbox div
  • 如何使用javascript通过类名更改html元素的值

    这是我用来更改 html 元素值的代码 a class classname href Vtech com This text to be chnage a 如何在页面加载瞬间更改此文本 看来你需要添加DOMContentLoaded或者把你
  • 为什么发送 fetch() 时我的响应数据未定义?

    我正在尝试在客户端使用 fetch 将数据发布到我的 NodeJS 服务器或从我的 NodeJS 服务器发布数据 服务器很好地收到了 post 请求 我能够记录 req 变量 但是当我 res send any data 时 客户端无法检测
  • 查找 JavaScript 中函数参数的数量[重复]

    这个问题在这里已经有答案了 可能的重复 获取函数的元数 https stackoverflow com questions 4848149 get a functions arity 假设我有 function a x function b
  • Javascript 警报/消息框中的欧元符号或其他实体

    有谁知道我如何在 javascript 警报窗口中显示欧元或其他 html 实体 alert u20AC HTML 实体字符查找 http leftlogic com lounge articles entity lookup
  • ES6 模板文字可以在运行时替换(或重用)吗?

    tl dr 是否可以制作可重用的模板文字 我一直在尝试使用模板文字 但我想我就是不明白 现在我感到沮丧 我的意思是 我想我明白了 但 它 不应该是它的运作方式 或者它应该如何实现 它应该变得不同 我看到的所有示例 甚至标记模板 都要求 替换
  • 为什么行框之间有空格,而不是由于半行距?

    在下面的代码示例中 您将看到垂直流动的之间有空白spans是 每个之间有空白line box 我想首先声明这与之间的差距无关inline block框 甚至是结果半领先 https www w3 org TR CSS21 visudet h
  • 防止文本环绕浮动图像

    我目前有一个向左浮动的图像 以及位于其右侧的一段文本 该文本块当前不是浮动的 它只是位于 HTML 中的图像之后 因此 当它变得更长时 它最终会踢到图像下方的左侧以继续 如何才能使文本块始终保持在图像的右侧 以便图像和文本的行为就像两个并排
  • 用空字符串替换状态:Javascript

    我有这个网址 website com con blog true 我在 javascript 中所做的是 if getURLparams blog RandomFunction change the url window history r
  • Kotlin JavaScript 到 TypeScript 定义文件

    我已经找到了ts2kt 库 https github com Kotlin ts2kt这将从任意位置创建 Kotlin 头文件 d ts文件 但是 我想朝相反的方向走 我想构建一个可以编译为 JavaScript 的 Kotlin 库 但我
  • KML 中的 JavaScript 被 Google 地球插件忽略

    我创建了一个简单的 KML 文件 该文件可以在独立的 Google 地球客户端中运行 但在 Google 地球插件中根本无法运行 无论浏览器如何
  • Nodejs 解码 base64 并使用流将它们保存到文件中

    在我的node js应用程序中 我使用以下代码行解码base64编码的图像 const fileDataDecoded Buffer from base64EncodedfileData base64 到目前为止 我可以使用以下代码编写一个
  • jQuery 倒计时插件 - 只显示非零周期

    我正在使用 jQuery 倒计时插件编写倒计时 我只希望它显示活动 非零 周期 例如代替 剩余时间 0 天 0 小时 13 分 20 秒 它应该只显示 13 分 20 秒 我的代码是 countdown countdown expiryUr

随机推荐

  • 二维数组的线性排序

    我是 C 编程新手 正在尝试编写一些排序程序 我编写了线性 正常排序的程序 现在我想做一个程序来对二维数组进行排序 即如果矩阵是 4 6 1 3 2 9 5 7 8 那么结果应该是 1 2 3 4 5 6 7 8 9 由于您希望 2D 数组
  • 控制 genoPlotRplot_gene_map 中的边距

    我正在制作一个plot gene map数字由genoPlotR R包 它给出了一个水平系统发育树 其中与每个叶子对齐的是一个基因组片段 这是一个简单的例子 说明了我的用法和问题 The plot gene map函数需要一个ade4的包p
  • 使用 django Rest 框架在验证步骤之前修改数据

    我有一个简单的Model存储创建它的用户ForeignKey 该模型有对应的ModelSerializer and ModelViewSet 问题是当用户提交一个POST要创造一个新记录 user应该由后端设置 我尝试覆盖perform c
  • 如何(可移植地)使用 C++ 类层次结构和动态链接库

    好吧 我知道可移植性不是 C 的强项 但我必须让我的代码在 Mac 和 Windows 上运行 我已经提出了一种解决方案 但它并不完美 我有兴趣看看是否有人可以提出更好的解决方案 我需要在多个 DLL 包中使用类层次结构 例如 我有一个抽象
  • iOS 6 视图加载期间的设备方向处理?

    我有一个标签栏应用程序 我使用的是 XCode 4 3 3 我已经升级到 4 5 2 带有 iOS6 的东西 我的代码在shouldAutorotateToInterfaceOrientation每个视图都会检查当前设备方向并正确放置所有
  • 如何在 XAML 中构建控件网格?

    我正在尝试按照规范在 WPF 中构建 UI UI 用于编辑项目集合 每个项目都有一个可编辑的字符串属性 以及 UI 需要显示的可变数量的只读字符串 它可能看起来像这样 或者 根据数据 可能有不同数量的文本标签列 文本列的数量是完全可变的 可
  • 由于通道 url 不兼容,设备未接收 C# Windows 推送通知

    经过几个小时的试用 我仍然无法向我的应用程序发送推送通知 这就是我到目前为止所做的 激活服务于https appdev microsoft com 得到了SID 我们调用它ms app s 1 23 4 12345678901 123456
  • GCC 值得在 Windows 上使用来替代 MSVC 吗?

    我目前在 Windows 上使用 Visual Studio 2010 使用 C 进行开发 在 C 11 正式发布后 我开始使用 MSVC 中已经提供的一些功能 但是 正如预期的那样 绝大多数新更改都不受支持 我想也许即将推出的 Visua
  • Javascript 是“缓存”操作吗?

    我正在用 Javascript 实现 Levenshtein 距离函数 我想知道用维基百科的示例 星期日 和 星期六 运行它需要多少时间 所以我用了console time and console timeEnd 以确定函数执行所花费的时间
  • 水晶报表 - 最后一页为空白

    我有一个水晶报告 生成时最后一页是空白的 除了页脚 指示当前页面以及报告标题 仅当倒数第二页上显示的数据完全填满页面时才会发生这种情况 有人知道为什么会这样吗 当您选中复选框时新页面之后 您会看到一个图标就在它旁边 这个图标代表配方工作坊
  • 从 AngularJS 中的两个资源调用返回 $promise 以延迟路由更改

    Use Case 使用路由提供程序 在解析中返回 promise 将避免 UI 加载后弹出数据 但是 我在处理两个不同的资源调用并将其作为单个数组返回时遇到问题 目前的实施 当前的实现有效 但要求控制器需要两个资源 var app angu
  • 无法使用 MAVEN 进行构建,出现错误 - 无法执行目标 org.apache.maven.plugins:maven-compiler-plugin:3.1:compile

    我一直在尝试使用maven 构建代码 但我遇到了一个错误 该代码可在此 github 存储库中找到 谷歌播放爬虫 https github com Akdeniz google play crawler 我的maven显示的系统配置如下 A
  • 如何修改Solr给出的搜索结果页面?

    我打算做一个利基搜索引擎 我使用 apache nutch 1 6 作为爬虫 使用 apache solr 3 6 2 作为搜索器 我必须说 网络上有关这些技术的更新信息非常少 我按照这个教程http wiki apache org nut
  • ServletContext getRealPath 方法 - 什么是虚拟路径?

    我正在阅读的文档getRealPath String s http docs oracle com javaee 5 api javax servlet ServletContext html getRealPath 28java lang
  • 如何更改日期选择器中的日期格式

    在我的 iPhone 应用程序中 我需要显示日期yyyy MM dd格式如下图所示 但在 iPhone 日期选择器中 它的格式为月 日 年这对于我的申请来说不统一 我尝试更改日期选择器的本地值 不同国家 地区 但仍以默认格式使用它 如何根据
  • 如何在 Angular 5 中的应用程序范围启动时加载列表(http 调用)?

    我希望在启动时加载数据 例如使用 LocationsService 的国家 地区 我已经实现了当前的服务 Injectable export class LocationsService public countries Country c
  • HttpContext.Current.User.Identity.IsAuthenticated 返回 false

    我有一个奇怪的问题 我有一个包含以下代码的页面 if HttpContext Current User Identity IsAuthenticated Server Transfer Views Public Unauthorised a
  • 不幸的是 已停止

    我有一个应用程序 用户以表单提交一些数据 然后将其发送到服务器 我正在平板电脑和 Android 智能手机 Galaxy S2 上对其进行测试 在平板电脑上 一旦我单击 提交 应用程序就会停止工作 并显示消息 不幸的是已停止工作 这个问题在
  • 在没有模块的情况下访问 JDK 11 中的“sun.security.x509”?

    tl 博士在最后 我们有一个生成自签名 SSL 证书的小方法 它显然取决于sun security x509 因此 目前我们仍在使用 JDK8 构建它 尽管代码库的其余部分 它只是一个小型的单个库 是使用 JDK11 构建并使用 JVM11
  • 创建不带输入文本框的复制按钮

    我需要一些 JavaScript 来制作一些文本 以便在您单击按钮时复制您的剪贴板 我已在下面附加了按钮 HTML 注意 我有多个按钮