1. 程式人生 > >clipboard.js在彈出框中無法復制的問題

clipboard.js在彈出框中無法復制的問題

con AS 類庫 dial ali oda focus 代碼 16px

前幾天發現了個bug,在jquery-ui的彈出框(dialog)中,使用clipboard.js實現的復制功能,竟然不會生效,後面查了下相關資料,發現不止jquery-ui的dialog不行,其他的模態框,例如bootstrap的,也是一樣不會生效的。原因就是彈出框會自動focus,而復制的底層實現是要獲取選中的內容,失去焦點後就無法獲取到了,從而導致復制失敗。

解決辦法:

1)對於 Bootstrap 模態框(Modals)中使用,或是在其他修改焦點的類庫中使用,你會希望將獲得焦點的元素設置為 container 屬性的值(網上的解決方案)

new Clipboard(‘.btn‘, {
    container: document.getElementById(
‘modal‘) });

2)對於我使用的jquery-ui的彈出框,我的做法是直接在代碼中註釋掉dialog相關的focus處理,從而成功解決該問題

clipboard.js在彈出框中無法復制的問題