js 操作剪切板

1.IE浏览器 window.clipboardData：

setData() //设置值

getData()//获取值

clearData()//删除值

            /*******
            ** IE 浏览器下支持window.clipboardData (兼容IE7+)
            ** 对于URL类型的数据失效
            ********/
            //复制内容到黏贴板
            $(':button:first').click(function () {
                window.clipboardData.setData('text', "asdfasdfasdf");
                //window.clipboardData.setData('URL', 'http://www.baidu.com/');
                alert('复制成功');
            });
            //黏贴内容
            $(':button:eq(1)').click(function () {
                //获取黏贴板内容
                /*
                * 获取数据失败，返回null
                */
                var result = window.clipboardData.getData('text');
                //var result = window.clipboardData.getData('URL');

                $('#txtTwo').html($('#txtTwo').html() + result);
            });

            //清空text数据
            $(':button:eq(2)').click(function () {
                window.clipboardData.clearData('text');
                alert('清空成功');
            });

2.IE7+和其他浏览器

1.文本框paste监听

            //paste 事件 支持 IE7+和其他
            //1.禁用文本框的粘贴事件
            //粘贴事件 paste
            $('#txtOne').on('paste', function (e) {
                e.preventDefault();
            });

            //注：使用jQuery 绑定事件，无法访问到 e.clipboardData
            $('#txtOne').on('paste', function (e) {
                console.info(e);
                var clip = e.clipboardData;
                var text = clip.getData('text');
                $('.divOne').append(text + '<br>');
            });

            //2.监听paste
            var txtOne = document.getElementById('txtOne');
            EventUtil.addHandler(txtOne, 'paste', function (e) {
                console.info(e);
                event = EventUtil.getEvent(e);
                var text = EventUtil.getClipboardText(event);
                $('.divOne').append(text + '<br>');
            });

            //3.paste时 有选择粘贴
            var txtOne = document.getElementById('txtOne');
            EventUtil.addHandler(txtOne, 'paste', function (e) {
                var event = EventUtil.getEvent(e);
                var text = EventUtil.getClipboardText(event);
                console.log(text.length);
                if (text.length < 10) {
                    $('.divOne').append(text + '<br>');
                }
                else {
                    //禁用黏贴默认操作
                    EventUtil.preventDefault(event);
                }
            });

注：jquery event对象不能访问event.clipboardData  说明

jquery.event

dom.event 

2.contenteditable 元素paste事件监听

    <div id="divOne" class="divOne" contenteditable="true">
    </div>

            //contenteditable 元素的paste事件
            //1.监听paste事件
            $('.divOne').on('paste', function (e) {
                var thisText = $(this).text();
                $('#result').append(thisText);
            });

            //2.监听paste事件2
            var divOne = document.getElementById('divOne');
            EventUtil.addHandler(divOne, 'paste', function (e) {
                var event = EventUtil.getEvent(e);
                var text = EventUtil.getClipboardText(event);
                $('#result').append(text + "<br>");
            });

 

 使用帮助类：

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    getEvent: function (event) {
        return event ? event : window.event;
    },
    getClipboardText: function (event) {
        var clipboardData = (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    setClipboardText: function (event, value) {
        if (event.clipboardData) {
            return event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData) {
            return window.clipboardData.setData("text", value);
        }
    },
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }
};

View Code