移動端觸控複製功能

2021-09-08 07:24:47 字數 1100 閱讀 9726

公司專案之前乙個需求，需要使用者一進頁面觸控手機後就自動幫他複製乙個串碼。。wtf? 還有這種操作？好吧，需求出來了，那就想實現吧。。。

使用者進來觸控手機 會產生touchstart, touchmove, touchend三個事件，我們肯定不能直接寫這三個事件去複製，這樣會影響它的預設事件，我們還要做的神不知鬼不覺。。。

所以，在函式內部我們就需要用到下面**

// part1


var t = document.createelement('textarea'); // 先生成乙個文字框


t.id = "wpcopy";


t.value="需要複製的東西";


t.setattribute('readonly','readonly');


t.setattribute('style',"font-size: 12pt; border: 0px; padding: 0px; margin: 0px; position: absolute; left: -9999px; top: 0px;"); //讓他消失在視野範圍內


var wpcopy = document.getelementbyid('wpcopy'); // 顯示的宣告


wpcopy.focus(); // 獲取焦點
在這裡我們建立乙個隱藏的可以賦值的文字框，下一步我們就需要在事件中判斷並且讓這個文字框裡的值跑到使用者的貼上板上了。。。

// part1


// 宣告乙個事件函式


function touch (event) 


break;


case "touchmove":


link = ""; // 如果使用者是觸屏移動則讓變數為空，不會觸發觸控開始元素的原有事件


break;


}}
到這一步基本可以完成需求了，下面將這兩段**整合成乙個函式方法，方便頁面呼叫

function loadcopy ()


// 在需要的頁面呼叫loadcopy 即可
這麼乙個需求其實也就是execcommand複製的應用。。。**寫得不好希望指出

移動端的觸控事件

首先 touch 包含三類事件，它們分別是 touchstart touchmove touchend touch 屬性 1.touch.identifier 此 touch 物件的唯一識別符號。一次觸控動作 我們指的是手指的觸控 在平面上移動的整個過程中，該識別符號不變。可以根據它來判斷跟蹤的是否...

移動端禁止觸控滾動

當移動端頁面顯示彈窗時，滑動螢幕，彈窗下方的頁面竟然可以上下滑動 雖然點選不到彈窗下方的內容，但仍然看不習慣 查閱資料後，給整個彈窗設定禁止觸控滾動，如下 由於頁面中存在多個彈窗，所以獲取了所有彈窗，再給每個彈窗設定禁止滾動 var masks document.getelementsbyclass...

HTML5實現移動端複製功能

首先遇到這個需求是就各種，但是發現基本都是用js實現，而且相容性www.cppcns.com還非常不好。但是在尋覓和嘗試的過程中，發現只需要css 也可以完全實現的，對需要複製內容的標籤加上下面這幾行 就可以了。webkit touch callout all webk程式設計客棧it user s...