在知乎复制的文本为什么会自带一些版权声明,这个功能是如何实现的?
比如说我复制的
123456
最后出现的是
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:stevenliuyi
链接:http://www.zhihu.com/question/20451870/answer/15168034
来源:知乎
123456
回复内容:
比如说我复制的
123456
最后出现的是
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:stevenliuyi
链接:http://www.zhihu.com/question/20451870/answer/15168034
来源:知乎
123456
大体思路:
答案区域监听
copy
事件,并阻止这个事件的默认行为。获取选中的内容(
window.getSelection()
)加上版权信息,然后设置到剪切板(clipboardData.setData()
)。
下面的代码实现了一个简单的DEMO
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div id="answer">测试数据<b>test</b></div> <script> function setClipboardText(event){ event.preventDefault(); var node = document.createElement('div'); //对documentfragment不熟,不知道怎么获取里面的内容,用了一个比较笨的方式 node.appendChild(window.getSelection().getRangeAt(0).cloneContents()); var htmlData = '<div>著作权归作者所有。<br />' + '商业转载请联系作者获得授权,非商业转载请注明出处。<br />' + '作者:tiantian<br />链接:http://segmentfault.com/u/tiantian_<br />' + '来源:segmentfault<br /><br />' + node.innerHTML + '</div>'; var textData = '著作权归作者所有。\n' + '商业转载请联系作者获得授权,非商业转载请注明出处。\n' + '作者:tiantian\n链接:http://segmentfault.com/u/tiantian_\n' + '来源:segmentfault\n\n' + window.getSelection().getRangeAt(0); if(event.clipboardData){ event.clipboardData.setData("text/html", htmlData); event.clipboardData.setData("text/plain",textData); } else if(window.clipboardData){ return window.clipboardData.setData("text", textData); } }; var answer = document.getElementById("answer"); answer.addEventListener('copy',function(e){ setClipboardText(e); }); </script> </body> </html>
看了知乎的代码,大致也是这么实现的,但是还加入了一些其他的判断,比如如果答案设置了不能复制,则阻止copy
事件,并显示提示信息,如果复制的文本长度小于42的话,不会加上版权信息。
copy
事件可以参考:
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/oncopy
http://codebits.glennjones.net/editing/setclipboarddata.htm
没有这个问题啊

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

JWT is an open standard based on JSON, used to securely transmit information between parties, mainly for identity authentication and information exchange. 1. JWT consists of three parts: Header, Payload and Signature. 2. The working principle of JWT includes three steps: generating JWT, verifying JWT and parsing Payload. 3. When using JWT for authentication in PHP, JWT can be generated and verified, and user role and permission information can be included in advanced usage. 4. Common errors include signature verification failure, token expiration, and payload oversized. Debugging skills include using debugging tools and logging. 5. Performance optimization and best practices include using appropriate signature algorithms, setting validity periods reasonably,

Static binding (static::) implements late static binding (LSB) in PHP, allowing calling classes to be referenced in static contexts rather than defining classes. 1) The parsing process is performed at runtime, 2) Look up the call class in the inheritance relationship, 3) It may bring performance overhead.

What are the magic methods of PHP? PHP's magic methods include: 1.\_\_construct, used to initialize objects; 2.\_\_destruct, used to clean up resources; 3.\_\_call, handle non-existent method calls; 4.\_\_get, implement dynamic attribute access; 5.\_\_set, implement dynamic attribute settings. These methods are automatically called in certain situations, improving code flexibility and efficiency.

PHP and Python each have their own advantages, and choose according to project requirements. 1.PHP is suitable for web development, especially for rapid development and maintenance of websites. 2. Python is suitable for data science, machine learning and artificial intelligence, with concise syntax and suitable for beginners.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

PHP is a scripting language widely used on the server side, especially suitable for web development. 1.PHP can embed HTML, process HTTP requests and responses, and supports a variety of databases. 2.PHP is used to generate dynamic web content, process form data, access databases, etc., with strong community support and open source resources. 3. PHP is an interpreted language, and the execution process includes lexical analysis, grammatical analysis, compilation and execution. 4.PHP can be combined with MySQL for advanced applications such as user registration systems. 5. When debugging PHP, you can use functions such as error_reporting() and var_dump(). 6. Optimize PHP code to use caching mechanisms, optimize database queries and use built-in functions. 7
