粘贴事件修改内容并将其返回到同一位置

Paste event modify content and return it at the same place

本文关键字：返回 位置 事件 修改      更新时间：2023-09-26

我创建了这个jsfiddle，试图解释我想做什么

http://jsfiddle.net/nonyck/tyyCN/

$('.autoresize').bind('paste', function(e) {
    e.preventDefault();
    var data = e.originalEvent.clipboardData.getData('text');
     if(data.match("http://.*?.(jpg|png|gif)")) {
       $('.autoresize').val($('.autoresize').val() + "<image src='" + data + "' >");
     } else { 
       $('.autoresize').val( $('.autoresize').val() + data);
     }
});

我尝试的是得到粘贴事件，然后修改它并将其返回到焦点所在的位置，而本例只是将内容返回到末尾。

如果用户在第2行，并粘贴了一些内容，将修改后的内容放在那里，而不是放在文档的末尾。

是否有一种方法可以在正确的位置返回值?

您可以使用jQuery在文本区域内获得插入符号的位置，以确定用户想要粘贴文本的位置:光标在文本区的位置(字符索引，而不是x/y坐标)

然后将数据插入该位置。参见更新的小提琴:http://jsfiddle.net/tyyCN/1/

if(data.match("http://.*?.(jpg|png|gif)")) {
         var caret = $(this).getCursorPosition();
         var insert = "<image src='" + data + "' >";
         var val = $('.autoresize').val();
       $('.autoresize').val(val.substring(0, caret) + insert + val.substring(caret, (val.length)));
     }
相关文章：