zoukankan      html  css  js  c++  java
  • 复制粘贴按钮实现

    //引入jQuery.js

    <script>
    var select = function(){
    return window.getSelection ? window.getSelection().toString() : document.selection.createRange();
    };
    // 获取光标位置
    function getCursortPosition(textDom) {
    console.log(textDom);
    var cursorPos = 0;
    if (document.selection) {
    // IE Support
    var selectRange = document.selection.createRange();
    selectRange.moveStart ('character', -textDom.value.length);
    cursorPos = selectRange.text.length;
    }else if (textDom.selectionStart || textDom.selectionStart*1 === 0) {
    // Firefox support
    cursorPos = textDom.selectionStart;
    }
    return cursorPos;
    }
    // 设置光标位置
    function setCaretPosition(textDom, pos){
    if(textDom.setSelectionRange) {
    // IE Support
    textDom.focus();
    textDom.setSelectionRange(pos, pos);
    }else if (textDom.createTextRange) {
    // Firefox support
    var range = textDom.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
    }
    }


    /**
    * 添加右键菜单
    */
    var $ul = $('<ul class="list-group" id="rightMenu" style="position: absolute; top: 100px; left: 200px;">' +
    '<li class="list-group-item" id="copyItem" style="cursor: pointer">复制</li>' +
    '<li class="list-group-item" id="pasteItem">黏贴</li>' +
    '</ul>');

    var copy = '', target;
    $('#body').on('contextmenu', function(e) {
    //alert('fffffffffffffffff')
    var $menu = $('#rightMenu');

    // 这一步是为了,每次都把当前的input 换成当前的。
    target = e.target;

    /**
    * 如果 $menu.length > 0
    * 则 !!menu.length === true
    * 也就是说,右键菜单已经存在,则只需要显示
    */
    if(!!$menu.length) {
    $menu.show();
    } else {
    /**
    * 如果不存在,则添加右键菜单以及事件
    */
    $('body').append($ul);

    /**
    * 复制
    */
    $('#copyItem').on('click', function copyItem() {
    // e.stopPropagation();
    target.focus()
    copy = select();
    console.log('复制', copy)

    $('#rightMenu').hide()
    });

    /**
    * 黏贴
    */
    $('#pasteItem').on('click', function pasteItem() {
    var value = $(target).val(), startText = '', endText = '';

    // 设置当前目标点 focus 状态
    target.focus()

    // 检查当前目标点是否有选中的内容
    var _copy = select();

    /**
    * 如果当前文本框中有选中该的内容
    * 则替换选中的内容
    */
    if(_copy) {
    var start = value.indexOf(_copy);
    startText = value.substring(0, start);
    endText = value.substring(start + _copy.length); // 后面的部分,等于截取 substring(选中前面部分 + 拷贝的部分个数)

    /**
    * 当前文本的内容等于,选中前面部分 + 拷贝的部分 + 选中后面的部分
    */
    target.value = startText + copy + endText;

    /**
    * 重新设置光标的位置
    * 光标位置等于光标的初始位置 + 拷贝的字段的个数
    */
    setCaretPosition(target, start + copy.length)
    } else {
    /**
    * 否则将文字插入到光标的位置
    */
    var foursIndex = getCursortPosition(target); // 获取光标位置
    startText = value.substring(0, foursIndex);
    endText = value.substring(foursIndex);

    /**
    * 当前文本的内容等于,光标前面部分 + 拷贝的部分 + 光标后面的部分
    */
    target.value = startText + copy + endText;

    /**
    * 重新设置光标的位置
    * 光标位置等于光标的初始位置 + 拷贝的字段的个数
    */
    setCaretPosition(target, foursIndex + copy.length)
    }
    $('#rightMenu').hide();
    });


    }


    $ul.css('left', e.clientX);
    $ul.css('top', e.clientY);

    return false
    });
    </script>

  • 相关阅读:
    Falsy Bouncer(算法)
    Check for Palindromes(算法)
    ecshop 修改模板可输出php代码
    ecshop显示所有分类树栏目
    ecshop首页调用评论及图片
    ECSHOP 商品评论条件修改——购买过该商品且只能评价一次(购买多少次能评价多少次)
    PS4破解
    Spring BeanFactory与FactoryBean的区别及其各自的详细介绍于用法
    Java中类方法与实例方法的区别
    Java中类及方法的加载顺序
  • 原文地址:https://www.cnblogs.com/benbenjia/p/9816154.html
Copyright © 2011-2022 走看看