clipboard 相关问题

我正在尝试开发一个“复制”按钮来将数字从多输入表单复制到剪贴板。我安装了 Clipboard.js 并将 id 指向元素，这样一切正常... 我正在尝试开发一个“复制”按钮来将数字从多输入表单复制到剪贴板。我安装了 Clipboard.js 并将 id 指向 <form> 元素，因此一切正常，除了每个输入的数字在复制时中间有一条断线。有什么办法可以删除中间的空格或换行吗？我应该在某处添加.replace(/[^0-9]/g, "")吗？ new ClipboardJS('.btn_copy', { }); .btn_copy { background: rgba(50, 50, 90, 1); min-height: 30px; width: 50px; padding: 15px 50px; color: #e1e1e1; font-family: sans-serif; font-size: 1.2em; display: inline-block; margin-left: 50px; cursor: pointer; } .btn_copy:hover { background: rgba(50, 50, 90, 0.9); } .circle input { border-radius: 999px; float: left; max-width: 100px; font-size: 2em; text-align: center; height: 100px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.js"></script> <form id="tkt_1"> <div class="circle"> <input type="number" placeholder="00" /> </div> <div class="circle"> <input type="number" placeholder="00" /> </div> <div class="circle"> <input type="number" placeholder="00" /> </div> </form> <div class="btn_copy" data-clipboard-action="copy" data-clipboard-target="#tkt_1">Copy</div> 要从字符串中删除任何空格或换行符，您可以使用 replace 方法，其中 '\n' 表示换行符，' ' 表示空格。 const formatedText = str.replace('\n', '').replace(' ', '') copy(formatedText) 请记住，声明copy(formatedText)只是象征性的。使用您想要或需要的任何内容将值复制到剪贴板。您不需要特殊的库来将内容放入剪贴板。只需使用navigator.clipboard.writeText() 这是与您相同的代码，但不需要 Clipboard.js 甚至 jQuery。 const inputs = document.querySelectorAll('.circle input'); const copyBtn = document.querySelector('.btn_copy'); copyBtn.addEventListener('click', ev =>{ const combined = Array.from(inputs).map(x => x.value).join(':'); navigator.clipboard.writeText(combined); }); .btn_copy { background: rgba(50, 50, 90, 1); min-height: 30px; width: 50px; padding: 15px 50px; color: #e1e1e1; font-family: sans-serif; font-size: 1.2em; display: inline-block; margin-left: 50px; cursor: pointer; } .btn_copy:hover { background: rgba(50, 50, 90, 0.9); } .circle input { border-radius: 999px; float: left; max-width: 100px; font-size: 2em; text-align: center; height: 100px; } <form id="tkt_1"> <div class="circle"> <input type="number" placeholder="00" /> </div> <div class="circle"> <input type="number" placeholder="00" /> </div> <div class="circle"> <input type="number" placeholder="00" /> </div> </form> <div class="btn_copy" data-clipboard-action="copy" data-clipboard-target="#tkt_1">Copy</div>

javascript html input clipboard clipboard.js

回答 2 投票 0

使用 jQuery/JavaScript 复制到剪贴板文本框值

我有一个文本框和按钮，如下所示：我有一个文本框和按钮，看起来像这样： <div class="col-xs-11" style="padding:20px 0 "> <input type="text" class="form-control txtKeywords" id="txtKeyw" style="margin-bottom:10px; height:45px;" maxlength="80" placeholder="Click on keywords to combine your title"> <button type="submit" class="btn btn-space btn-success btn-shade4 btn-lg copyToClipboard"> <i class="icon icon-left s7-mouse"></i> Copy to Clipboard /button> 当用户点击按钮复制到剪贴板时，我想像这样将文本框的内容复制到剪贴板中： $(document).on("click", ".copyToClipboard", function () { copyToClipboard("txtKeyw"); successMessage(); }); 其中copyToClipboard函数的定义是： function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); } 但是当我这样做时，什么也没有发生——没有值从文本框复制到剪贴板……我在这里做错了什么？更多信息：这在 Chrome 59 64 位和 Firefox 54 32 位中都会发生。 successMessage()被调用并显示在浏览器中。在元素 ID 前添加 # 并不能解决问题。第 1 步：像这样改变您的copyToClipboard(element)： function copyToClipboard(text) { var textArea = document.createElement( "textarea" ); textArea.value = text; document.body.appendChild( textArea ); textArea.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',err); } document.body.removeChild( textArea ); } 第 2 步：给你的按钮一个 id，然后像这样给它添加一个事件监听器： $( '#btnCopyToClipboard' ).click( function() { var clipboardText = ""; clipboardText = $( '#txtKeyw' ).val(); copyToClipboard( clipboardText ); alert( "Copied to Clipboard" ); }); 试试这个..这是正确的方法。第一步： function copyToClipboard(text) { var textArea = document.createElement( "textarea" ); textArea.value = text; document.body.appendChild( textArea ); textArea.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'); } document.body.removeChild( textArea ); } 第二步： $( '#btnCopyToClipboard' ).click( function() { var clipboardText = ""; clipboardText = $( '#txtKeyw' ).val(); copyToClipboard( clipboardText ); alert( "Copied to Clipboard" ); }); copyToClipboard() 获取一个元素作为参数。 txtKeyw 是 id，你必须在它之前加上 #. 我相信 document.execCommand('copy') 现在已被弃用，已在 Edge v 113.0 和 Opera v 98.0 上测试改用这个： function copyToClipboard() { var txtField = document.getElementById('txt-field'); txtField.select(); navigator.clipboard.writeText(txtField.value); alert('Copied to clipboard!'); }

javascript jquery input copy clipboard

回答 4 投票 0

如何将剪贴板中的图像粘贴到 Blazor 服务器端应用程序（C# & .NET 7.0）

我需要帮助解决我在 Blazor 服务器端应用程序中遇到的问题。具体来说，我正在尝试从剪贴板获取图像并将其用作 MemoryStream。我环顾四周，甚至问查...

c# blazor-server-side clipboard .net-7.0 blazor-jsruntime

回答 0 投票 0

使用 navigator.clipboard 复制 HTML/富文本

基于剪贴板写入 API 规范，我可以像下面这样复制到剪贴板： const type = "text/plain"; const text = "测试普通"; const blob = new Blob([文本], ...

javascript copy clipboard copy-paste navigator

回答 1 投票 0

如何强制剪贴板在 VBA 中更新

我每天必须完成一项任务。它涉及将信息从 excel 复制到公司软件中。我对这个特定的公司软件没有任何控制权。我正在尝试自动化...