zoukankan      html  css  js  c++  java
  • 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

    更多:

    JavaScript操作剪贴板(转)

  • 相关阅读:
    视图
    谷歌浏览器F12基本用法
    SQL数据库的操作,表的操作
    SQL增删改语句
    SQL查询语句
    jq的click 与 on 的区别
    6.实现struts2+hibernate实现学生列表的增删改查
    5.使用struts+hibernate显示学生列表
    4.struts2+bibernate实现用户登陆(dao,daoimpl,以及action,struts,jsp)
    3.创建自定义的session工厂工具类以及所有Action的父类
  • 原文地址:https://www.cnblogs.com/tianma3798/p/4514390.html
Copyright © 2011-2022 走看看