HTML頁面---復制按鈕的使用(包含彈層)

greatwhole 發布于2019-08-29 12:23 / 2407人閱讀

摘要：所以對不可用的設備，采用彈層，長按手動復制的方法。代碼如下復制用的話，當頁面過長，下面的部分不會覆蓋。請長按選中下面虛線框中的內容進行復制點擊關閉復制的時候得不到值，所以通過下面的方法更改。

先說一下我的整體方案：

用到了clipboard插件，官方地址和github地址，也可以參考中文說明。

clipboard插件實測：在PC端的瀏覽器（試了mac上的safari,chrome,firefox）可用，iOS 10.3上的safari可用，手機上的微信QQ瀏覽器能用，安卓手機自帶的瀏覽器以及UC，不可用。所以對不可用的設備，采用彈層，長按手動復制的方法。

這里需要注意一點，當需要獲取的標簽為dispaly:none 的時候data-clipboard-target的方式得不到值，可用data-clipboard-text結合下面的方法。

var getContent=document.getElementById("divContent").innerHTML;
document.getElementById("copy-button").setAttribute("data-clipboard-text", getContent);

代碼如下：



    
        
        
        
        復制
        
        
    

    
        
            
                請長按選中下面虛線框中的內容進行復制：
                
                    hello world!

云服務器 GPU云服務器頁面包含的處理 html的包含 html包含的技術 html 彈層

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111858.html

HTML頁面---復制按鈕的使用(包含彈層)

摘要：所以對不可用的設備，采用彈層，長按手動復制的方法。代碼如下復制用的話，當頁面過長，下面的部分不會覆蓋。請長按選中下面虛線框中的內容進行復制點擊關閉復制的時候得不到值，所以通過下面的方法更改。先說一下我的整體方案：用到了clipboard插件，官方地址和github地址，也可以參考中文說明。 clipboard插件實測：在PC端的瀏覽器（試了mac上的safari,chrome,f...

mylxsw 2019-08-20 15:44 評論0 收藏0
移動端 h5開發相關內容總結(三)

摘要：就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。標簽的屬性應當與相關元素的屬性相同。所以在和移動我分別用了兩種方案，傳統布局實現，彈性盒實現。前者是控制彈性盒的內容垂直方向居中，后者控制內容水平方向居中。之前寫過兩篇開發中遇到的問題和解決方案。當時是CSS 和 JavaScript 分開寫的。現在寫這篇文章的時候感覺很多內容都是有內在聯系的，所以不好分開。...

cnTomato 2019-08-19 17:33 評論0 收藏0
移動端 h5開發相關內容總結(三)

摘要：就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。標簽的屬性應當與相關元素的屬性相同。所以在和移動我分別用了兩種方案，傳統布局實現，彈性盒實現。前者是控制彈性盒的內容垂直方向居中，后者控制內容水平方向居中。之前寫過兩篇開發中遇到的問題和解決方案。當時是CSS 和 JavaScript 分開寫的。現在寫這篇文章的時候感覺很多內容都是有內在聯系的，所以不好分開。...

antyiwei 2019-08-30 12:44 評論0 收藏0
移動端 h5開發相關內容總結(三)

摘要：就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。標簽的屬性應當與相關元素的屬性相同。所以在和移動我分別用了兩種方案，傳統布局實現，彈性盒實現。前者是控制彈性盒的內容垂直方向居中，后者控制內容水平方向居中。之前寫過兩篇開發中遇到的問題和解決方案。當時是CSS 和 JavaScript 分開寫的。現在寫這篇文章的時候感覺很多內容都是有內在聯系的，所以不好分開。...

MonoLog 2019-08-01 15:02 評論0 收藏0