溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了怎么在HTML5中實現移動端復制功能，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
使用clipboard.js實現移動端粘貼復制
clipboard.js是一款很強大的粘貼復制的插件，但是在移動端使用，會出現兼容性問題。下面是我常使用的一種解決方案。
html
<input id="foo1" value="http://www.shellad.com/_2SP__22（要復制的內容）" readonly="readonly"> <div class="the_btn_con"><button class="btn" data-clipboard-target="#foo1">復制</button></div>
js
$(function () {
var clipboard = new Clipboard('.btn');
//優雅降級:safari 版本號>=10,提示復制成功;否則提示需在文字選中后，手動選擇“拷貝”進行復制
clipboard.on('success', function(e) {
alert('復制成功!')
console.log($(this))
e.clearSelection();
});
clipboard.on('error', function(e) {
alert('請選擇“拷貝”進行復制!')
});
})注意我在保存要復制的內容時使用的是input控件，而不是div或者span。因為，在測試時只有input的兼容性最好，不會出現問題，能夠保證正常復制。同時，該插件也不支持safari 版本號<10,所以要做好提示。
上述內容就是怎么在HTML5中實現移動端復制功能，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
