jquery轻量级textarea复制粘贴插件

所属分类：网页特效-丰富的输入 2023-07-16 10:10:50

8.5K 3 查看评论 (0)

查看演示登录后下载 温馨提示
登录会员即可享受免费下载我要建站

资源描述：一款基于textarea可复制粘贴插件，可通过外部复制图片或文本内容，粘贴到多行文本框，自动识别提取内容输出。

jquery轻量级textarea复制粘贴插件（共3个文件）

browserstack_logo.png

paste.js

index.html

使用方法

code
source

$(function(){
      $('.demo-noninputable').pastableNonInputable();
      $('.demo-textarea').on('focus', function(){
        var isFocused = $(this).hasClass('pastable-focus');
        console && console.log('[textarea] focus event fired! ' + (isFocused ? 'fake onfocus' : 'real onfocus'));
      }).pastableTextarea().on('blur', function(){
        var isFocused = $(this).hasClass('pastable-focus');
        console && console.log('[textarea] blur event fired! ' + (isFocused ? 'fake onblur' : 'real onblur'));
      });
      $('.demo-contenteditable').pastableContenteditable();
      $('.demo').on('pasteImage', function(ev, data){
        var blobUrl = URL.createObjectURL(data.blob);
        var name = data.name != null ? ', name: ' + data.name : '';
        $('<div class="result">image: ' + data.width + ' x ' + data.height + name + '<img src="' + data.dataURL +'" ><a href="' + blobUrl + '">' + blobUrl + '</div>').insertAfter(this);
      }).on('pasteImageError', function(ev, data){
        alert('Oops: ' + data.message);
        if(data.url){
          alert('But we got its url anyway:' + data.url)
        }
      }).on('pasteText', function(ev, data){
        $('<div class="result"></div>').text('text: "' + data.text + '"').insertAfter(this);
      }).on('pasteTextRich', function(ev, data){
        $('<div class="result"></div>').text('rtf: "' + data.text + '"').insertAfter(this);
      }).on('pasteTextHtml', function(ev, data){
        $('<div class="result"></div>').text('html: "' + data.text + '"').insertAfter(this);
      });
});

$(function(){
      $('.demo-noninputable').pastableNonInputable();
      $('.demo-textarea').on('focus', function(){
        var isFocused = $(this).hasClass('pastable-focus');
        console && console.log('[textarea] focus event fired! ' + (isFocused ? 'fake onfocus' : 'real onfocus'));
      }).pastableTextarea().on('blur', function(){
        var isFocused = $(this).hasClass('pastable-focus');
        console && console.log('[textarea] blur event fired! ' + (isFocused ? 'fake onblur' : 'real onblur'));
      });
      $('.demo-contenteditable').pastableContenteditable();
      $('.demo').on('pasteImage', function(ev, data){
        var blobUrl = URL.createObjectURL(data.blob);
        var name = data.name != null ? ', name: ' + data.name : '';
        $('<div class="result">image: ' + data.width + ' x ' + data.height + name + '<img src="' + data.dataURL +'" ><a href="' + blobUrl + '">' + blobUrl + '</div>').insertAfter(this);
      }).on('pasteImageError', function(ev, data){
        alert('Oops: ' + data.message);
        if(data.url){
          alert('But we got its url anyway:' + data.url)
        }
      }).on('pasteText', function(ev, data){
        $('<div class="result"></div>').text('text: "' + data.text + '"').insertAfter(this);
      }).on('pasteTextRich', function(ev, data){
        $('<div class="result"></div>').text('rtf: "' + data.text + '"').insertAfter(this);
      }).on('pasteTextHtml', function(ev, data){
        $('<div class="result"></div>').text('html: "' + data.text + '"').insertAfter(this);
      });
});

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服