V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
yeelone
V2EX  ›  问与答

jquery 如何监听黏贴事件 ,并把黏贴内容插入到光标之后 ?

  •  
  •   yeelone · 2013-01-28 00:10:08 +08:00 · 5850 次点击
    这是一个创建于 4317 天前的主题,其中的信息可能已经有所发展或是发生改变。
    有下面一个div 内容 :
    <div class='content' id='"+ id +"-content' contenteditable='true' spellcheck='false'> </div>

    我想实在像富文本编辑器那样的功能,可以黏贴内容 ,插入到光标的位置 。
    监听事件是这样写的:
    $(".content").live('paste', function (e) {
    var self = this;
    setTimeout(function() {
    var paste_values = $(self).text();
    var new_values = $.htmlClean(paste_values, { format: true,allowedTags:["a",] });//清除HTML格式 。
    $(self).text(new_values);
    },0);
    });

    但是这样的话,会同时取出所有的 内容 ,包括黏贴之前的内容也会被清除掉格式,这不是我想要的,所有原先内容的格式都希望保留,只想单纯把新黏贴的内容取出并去掉所有html格式 。

    请问,这该如何做呢?
    问题一:如何取出黏贴的内容 ,如我上面的代码中,$(self).text(); 这样会取出editor中所有的内容 。我只想要黏贴的内容
    问题二:如果把这个内容 播放 到光标位置之后 ?

    请大家帮帮忙。谢谢。
    16 条回复    1970-01-01 08:00:00 +08:00
    ljbha007
        1
    ljbha007  
       2013-01-28 00:33:23 +08:00
    $(".content").live('paste', function (e) {
    var self = this;
    var prev_len = $(self).text().length;
    setTimeout(function() {
    var now_len = $(self).text().length;
    var paste_values = $(self).text().slice(prev_len, now_len - prev_len);
    var new_values = $.htmlClean(paste_values, { format: true,allowedTags:["a",] });//清除HTML格式 。
    $(self).text(new_values);
    },0);
    });
    ljbha007
        2
    ljbha007  
       2013-01-28 00:34:23 +08:00   ❤️ 1
    $(".content").live('paste', function (e) {
    var self = this;
    var prev_len = $(self).text().length;
    setTimeout(function() {
    var now_len = $(self).text().length;
    var paste_values = $(self).text().slice(prev_len, now_len - prev_len);
    var old_values = $(self).text().slice(0, prev_len);
    var new_values = $.htmlClean(paste_values, { format: true,allowedTags:["a",] });//清除HTML格式 。

    $(self).text(old_values + new_values);
    },0);
    });
    yeelone
        3
    yeelone  
    OP
       2013-01-28 11:01:53 +08:00
    @ljbha007 谢谢。
    NemoAlex
        4
    NemoAlex  
       2013-01-28 11:17:03 +08:00
    标题这什么字?怎么读啊?
    楼主用的什么输入法?“粘贴”都打不出来么?
    yeelone
        5
    yeelone  
    OP
       2013-01-28 11:19:07 +08:00
    @ljbha007 HI,想再请问你一个问题,因为黏贴嘛,是黏贴在光标的位置 ,但是如上代码中,是默认认为黏贴的内容是在最后,但有时候是在中间某个位置 ,所以如何做到,把黏贴的内容插入到光标位置之后呢?
    我在想,先取出光标之前的内容,光标之后的内容 ,再 把黏贴的内容 插入在中间。
    但是问题,我不知道怎么取出光标的位置 ,在网上找了很多代码,都没有用。
    比如 :

    $.fn.getCursorPosition = function() {
    var el = $(this).get(0);
    var pos = 0;
    if('selectionStart' in el) {
    console.log('selectionStart');
    pos = el.selectionStart;
    } else if('selection' in document) {
    console.log('selection');
    el.focus();
    var Sel = document.selection.createRange();
    var SelLength = document.selection.createRange().text.length;
    Sel.moveStart('character', -el.value.length);
    pos = Sel.text.length - SelLength;
    }
    return pos;
    }

    两个if 都没有进去。
    ljbha007
        6
    ljbha007  
       2013-01-28 11:21:57 +08:00
    @yeelone
    我也得慢慢去研究啦
    刚才干了个很蠢的事 现在没心情研究了
    http://www.v2ex.com/t/58974#reply12
    kamal
        7
    kamal  
       2013-01-28 12:41:37 +08:00
    获取/设置光标位置 http://jsbin.com/ibiwa6/1/edit
    yangg
        8
    yangg  
       2013-01-28 13:00:30 +08:00
    提一下,建议不要再使用jQuery的live方法,建议使用on或者delegate
    http://jquery.com/upgrade-guide/1.9/#live-removed
    mopig
        9
    mopig  
       2013-01-28 13:10:37 +08:00
    @NemoAlex 卤煮 打 [niantie] ,粘贴 组词的时候念 [zhantie]
    yeelone
        10
    yeelone  
    OP
       2013-01-28 13:19:59 +08:00
    @kamal 似乎对 div contenteditable 不起作用,只能作用于 textarea
    yeelone
        11
    yeelone  
    OP
       2013-01-28 13:22:04 +08:00
    @yangg 谢谢。
    yeelone
        13
    yeelone  
    OP
       2013-01-28 16:51:44 +08:00
    @kamal 请问,如何 在 pasteHtmlAtCaret(html) 里,取得粘贴的内容? 有没有哪个方法提供了这样的功能 ?
    kamal
        14
    kamal  
       2013-01-28 18:52:13 +08:00
    这个代码库把有关拷贝粘贴的功能都封装好了
    http://code.google.com/p/rangy/
    isy
        15
    isy  
       2013-01-28 21:50:32 +08:00
    最新版本的 jQuery 把 live 事件去掉了
    skydiver
        16
    skydiver  
       2013-01-28 21:54:49 +08:00
    @isy 用 .on()就行了吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1563 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 17:06 · PVG 01:06 · LAX 09:06 · JFK 12:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.