js检测用户长按或选中当前元素上的文字,检测用户复制操作

来源:赵克立 分类: HTML5 标签:js特效发布时间:2016-09-26 10:43:25浏览:104
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2017-06-24 14:10:23

移动端检测用户是否复制过一些文字的功能实现.

首先直接检测复制事件似乎是不可能的,因为没有复制这个事件,所以只能检测用户是否选中过或在这些文字上长按过的操作,因为选中或长按后最可能的操作就是复制啦

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>标题</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="描述" />
</head>
<body>
    <input id="weixin" type="text" value="http://www.zhaokeli.com/" style="border:none;display:block;background:#ededed;height:30px;line-height:30px;" readonly="readonly" />
    <script type="text/javascript">
    ! function(a, b) {
        "user strict";
        a.jiance = {
            _xy: [0, 0],
            init: function(id, callback) {
                var obj = document.getElementById(id);
                obj.addEventListener('touchstart', function(event) {
                    if (event.targetTouches.length == 1) { 
                        //设置如果长按两秒
                        jiance.timeid = setTimeout(function() {
                            //准备进行复制........
                            typeof callback == 'function' && callback(touch, obj);
                        }, 2000);
                        event.preventDefault();
                        var touch = event.targetTouches[0];
                        jiance._xy[0] = touch.pageX;
                        jiance._xy[1] = touch.pageY;
                    }
                }, false);
                obj.addEventListener('touchmove', function(event) {
                    if (event.targetTouches.length == 1) {    
                        clearTimeout(jiance.timeid);
                        event.preventDefault();
                        var touch = event.targetTouches[0];
                        //移动超过10个像素判断为选中文字
                        if ((Math.abs(touch.pageX - jiance._xy[0])) > 10) {
                            //准备进行复制........
                            typeof callback == 'function' && callback(touch, obj);
                        }
                    }
                }, false);
                obj.addEventListener('touchend', function(event) {
                    clearTimeout(jiance.timeid);
                    jiance._xy[0] = 0;
                    jiance._xy[1] = 0;
                }, false);
            }
        }
    }(window);
    /**
     * 使用方法
     * @param  {[type]} touch [description]
     * @param  {[type]} dom)  { var        val [description]
     * @return {[type]}       [description]
     */
    jiance.init('weixin', function(touch, dom) {
        alert('copye');
        var val = dom.value;
        dom.setSelectionRange(0, val.length);
        dom.focus();
    });
    </script>
</body>
</html>



微信号:kelicom QQ交流群:215861553
点击更换验证码
留言