精华内容
下载资源
问答
  • JavaScript+Html5实现按钮的复制文字剪切板功能,手机网页兼容

    新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了。写出了总结下

    使用的方法:clipboard

    插件下载地址:https://github.com/zenorocha/clipboard.js/tree/master

    引入插件:目录\clipboard.js-master\dist\clipboard.min.js

    目录中有各种demo,分别实现了固定的文字复制,input的复制等等,可以看下找找思路;

    下边来记录下使用的方式:

    一:引入插件:

    <script src="js/clipboard.min.js" type="text/javascript"></script>

    二:给标签添加属性:data-clipboard-text

     <div id="btn" data-clipboard-text="1">
            <span>Copy</span>
        </div>


    三:定义script :实现复制功能---(写的内部的script,外部的总是报错,找不到类,新手不大懂,以后再补充)

    <script>
    var clipboard = new Clipboard('btn');
    clipboard.on('success', function(e) {
    e.clearSelection();
    //复制成功
    });
    clipboard.on('error', function(e) {
    //复制失败
    });
    </script>

    补充
    new Clipboard()----参数为id class都可以,跟css定义一样   id 或者.class

    四:自定义复制的内容;

    new Clipboard('.btn', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });

    通过return返回想复制的内容,

    五:列表页复制每条列表内容

    可以给每个item自定义属性data-clipboard-text即可

    div.setAttribute("data-clipboard-text","asdf");


    补充:电脑浏览器几乎都可以支持,手机上安卓可以,苹果有点问题,需要把标签设置成button


    展开全文
  • 网页文字抓取

    2014-03-03 00:40:52
    可以抓取网络文字,直接把软件的按钮拖到网页上,内容就被抓取到剪切板中了。
  • div,p,span{ -webkit-user-select:text; -moz-user-select:text;...最近在做公众号的功能,发现了一个问题就是在微信公众号里面的网页居然不能随意复制黏贴文字 查了一下别人家的就可以 所以在网上...
    div,p,span{
           -webkit-user-select:text;
           -moz-user-select:text;
           -ms-user-select:text;
           user-select:text;
    }
    

    直接上代码吧

    最近在做公众号的功能,发现了一个问题就是在微信公众号里面的网页居然不能随意复制黏贴文字
    查了一下别人家的就可以
    所以在网上找了很久最后发现了这个代码
    加上之后就好使了,所以在此记录 一下

    展开全文
  • 在项目中,偶尔会遇到将页面的文字复制到用户的剪切板中,方便用户操作,但是由于这种操作比较少,可能整个应用就一个地方或者两个地方,引入一个插件可能代价有点大。 创建一个组件 ng generate component ...

    在项目中,偶尔会遇到将页面的文字复制到用户的剪切板中,方便用户操作,但是由于这种操作比较少,可能整个应用就一个地方或者两个地方,引入一个插件可能代价有点大。

    创建一个组件

    ng generate component copyToClipboard
    CREATE src/app/pages/copy-to-clipboard/copy-to-clipboard.component.less (0 bytes)
    CREATE src/app/pages/copy-to-clipboard/copy-to-clipboard.component.html (36 bytes)
    CREATE src/app/pages/copy-to-clipboard/copy-to-clipboard.component.spec.ts (693 bytes)
    CREATE src/app/pages/copy-to-clipboard/copy-to-clipboard.component.ts (312 bytes)
    UPDATE src/app/pages/pages.module.ts (2939 bytes)
    
    

    修改组件的模版文件

    <nz-content>
      <label>这事要复制到剪切板的内容</label>
      <button nz-button>复制</button>
    </nz-content>
    

    在组件的泪文件中添加复制的方法

    import { Component, OnInit, Renderer2 } from '@angular/core';
    import { NzNotificationService } from 'ng-zorro-antd';
    
    @Component({
      selector: 'app-copy-to-clipboard',
      templateUrl: './copy-to-clipboard.component.html',
      styleUrls: ['./copy-to-clipboard.component.less']
    })
    export class CopyToClipboardComponent implements OnInit {
    
      constructor(private notification: NzNotificationService) {
      }
    
      ngOnInit() {
      }
    
      public handleCopyToClipboard(copyWord: HTMLElement) {
        const range = document.createRange();
        range.selectNode(copyWord);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
        document.execCommand('copy');
        this.notification.success('复制成功~', '');
        window.getSelection().removeAllRanges();
      }
    }
    
    

    这里notification是使用在复制成功以后给用户一个提示

    将类文件中复制的函数与按钮点击事件绑定

    <nz-content>
      <label #copyWord>这事要复制到剪切板的内容</label>
      <button nz-button (click)="handleCopyToClipboard(copyWord)">复制</button>
    </nz-content>
    

    效果如下

    在这里插入图片描述

    在GitHub中查看

    展开全文
  • 有时候经常在网上看到网页可以读取系统粘贴板的内容,可以显示文字和图片等内容,就挺好奇的,所以就研究了一下。 基本原理 通过监听input的paste事件,获取到clipboardData内容,然后显示到页面上面。 方法实现 ...

    有时候经常在网上看到网页可以读取系统粘贴板的内容,可以显示文字和图片等内容,就挺好奇的,所以就研究了一下。

    基本原理

    通过监听inputpaste事件,获取到clipboardData内容,然后显示到页面上面。

    方法实现

    • html部分
    <div class="paste">
    	<select name="type" id="type">
    		<option value="text">文本</option>
    		<option value="richText">富文本</option>
    		<option value="img">图片</option>
    	</select>
    	<input id="content" type="text" placeholder="请输入粘贴内容">
    	<p>您粘贴的内容是: </p>
    	<p id="view"></p>
    	<div>
    		测试内容:<a href="https://www.baidu.com/">https://www.baidu.com/</a>
    	</div>
    </div>
    
    • css部分
    .paste {
    	margin: 0 auto;
    	max-width: 320px;
    }
    select {
    	width: 80px;
    	height: 30px;
    }
    input {
    	width: 225px;
    	height: 25px;
    }
    #view {
    	padding: 10px;
    	border: 2px dotted pink;
    }
    
    • js部分
    let type = document.querySelector('#type');
    let content = document.querySelector('#content');
    let view = document.querySelector('#view');
    showClip(type.value, content, view);
    
    type.addEventListener('change', function (e) {  
    	let currentType = e.target.value;
    	content.value = '';
    	view.innerText = '';
    	showClip(currentType, content, view);
    })
    
    function showClip (type, content, view) {
    	content.addEventListener('paste', function (event) {  
    		let clipboardData = event.clipboardData || event.originEvent.clipboardData;
    		let items = clipboardData.items;
    		if (type == 'text') {
    			if (items.length > 0 && items[0].kind == 'string') {
    				items[0].getAsString(function (e) {  
    					view.innerText = e;
    				})
    			}
    		}
    		if (type == 'richText') {
    			if (items.length > 0 && items[1].kind == 'string') {
    				items[1].getAsString(function (e) {  
    					view.innerHTML = e;
    				})
    			}
    		}
    		if (type == 'img') {
    			if (items.length > 0 && items[0].kind == 'file') {
    				let blob = items[0].getAsFile();
    				let reader = new FileReader();
    				reader.readAsDataURL(blob);
    				reader.onload = function (e) {  
    					let img = document.createElement('img');
    					img.src = e.target.result;
    					view.appendChild(img);
    				}
    			}
    		}
    	})
    }
    

    效果预览

    • 粘贴显示文本内容
      在这里插入图片描述
    • 粘贴显示富文本内容
      在这里插入图片描述
    • 利用微信,qq等截图工具粘贴图片

    在这里插入图片描述
    在这里插入图片描述
    好了,就介绍到这里。

    展开全文
  • 我们可以通过 JS 代码来禁用网页的复制事件、剪切事件、选择内容事件甚至是右键菜单事件。 // 禁止右键菜单 document.oncontextmenu = function(){ return false; }; // 禁止文字选择 document.onselec
  • 对于网页设计者来说,其他网站使用的字体有些是十分值得借鉴的,好的字体能... 由于网页上标题、正文、链接等部分的文字为了区分开来,以及突出重点,所以一般会使用不同的字体以及大小来显示,而firebug每次查找...
  • 只要点击IE的“工具”→“Internet选项”菜单,进入“安全”标签页,选择“自定义级别”,将所有脚本全部禁用,然后按F5键刷新网页,这时你就会发现那些无法选取的文字可以选取了 在采集到了自己需要的内容后,一定...
  • js 实现 将网页内容 复制到剪切

    千次阅读 2017-11-19 16:31:15
     二、复制专题地址和 url 地址,传给 QQ/MSN 的好友 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...
  • 文字剪切,复制,移动 功能区操作 快捷键 鼠标拖曳 功能区操作 功能区的剪贴板就有剪切,复制,粘贴 选中要操作的内容,点击剪切,复制 , 然后再选择要放的地方,点击粘贴...
  • )如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用 copy 命令,将文本复制到剪切板但是 select() 方法只对 &lt;input&gt; 和 &lt;textarea&gt; 有效,对于 &lt;p&gt; ...
  • 网页剪切 有道云笔记 火狐Do you hate having to type the same e-mail signature, standard letter, or other text over and over every day? See how easy it is to create a “click and go” library of text ...
  • 经常上网找资料,可能会遇到这样的情况:想要的内容只能看,不能复制。如果只是只言片语,还可以自己手工打字。但要是内容很多,这样做就太慢了。...2、打开需要提取文字网页,用鼠标双击“天若”的图标,然后在网...
  • 其实实现的方式很简单,可以在我的网站页面绑定一个copy事件,当你复制文章内容的时候,自动在剪切文字后面加上一段版权声明。 我这边是没有加这些的,代码什么的想复制就复制好了。大家都是靠代码技能吃饭的,...
  • 近期,白描 App 新上线了 网页版,主要是为了能在电脑大屏幕快捷高效地进行 OCR 文字识别。在没有网页版之前,很多使用白描 App 的用户如果想在电脑识别文字,会选择 WiFi 识别功能,就是通过同一个局域网,将...
  • function copyText() { var text = ""; // 要复制的文本 var tag = document.createElement('input'); tag.setAttribute('id', 'copy_content'); tag.value = text; document.getElementsByTagNa...
  • 如何复制防复制的网页文字? 2011-04-24 10:25:10|分类:电脑知识|举报|字号订阅 1,网页中嵌入了javascript语言,通过编程手段屏蔽了复制。 只要点击IE的“工具”→“Internet选项”菜单,进入“安全...
  • 写出了总结下使用的方法:clipboard插件下载地址:https://github.com/zenorocha/clipboard.js/tree/master引入插件:目录\clipboard.js-master\dist\clipboard.min.js目录中有各种demo,分别实现了固定的文字复制,...
  • JavaScript+Html5实现按钮复制文字剪切板功能(手机网页兼容)2019-01-07编程之家https://www.jb51.cc新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了。写出了总结下使用的方法:clipboard引入插件:...
  • 写出了总结下使用的方法:clipboard插件下载地址:https://github.com/zenorocha/clipboard.js/tree/master引入插件:目录\clipboard.js-master\dist\clipboard.min.js目录中有各种demo,分别实现了固定的文字复制,...
  • 一键将相应div内的内容复制到剪切,粘到QQ聊天窗口即可发送图片。
  • 微集分是一款能够随意抓取网页中的元信息,并即时分享到自己的社会化网络媒体平台中的服务,那些能够被抓取和分享的内容包括图片、视频、歌曲、链接,甚至于只是一小片儿的简短文字等等等等。不仅仅是分享,微集分 ....
  •  只要点击IE的“工具”→“Internet选项”菜单,进入“安全”标签页,选择“自定义级别”,将所有脚本全部禁用,然后按F5键刷新网页,这时你就会发现那些无法选取的文字可以选取了  在采集到了自己需要的内容后...
  • 如何复制不让你复制的网页文字

    千次阅读 2013-08-28 18:01:12
     只要点击IE的“工具”→“Internet选项”菜单,进入“安全”标签页,选择“自定义级别”,将所有脚本全部禁用,然后按F5键刷新网页,这时你就会发现那些无法选取的文字可以选取了   在采集到了自己需要的内容后...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,269
精华内容 3,707
关键字:

如何剪切网页上面的文字