标签：
之前以为禁用剪切，复制，粘贴得整一大堆js，结果今天一查，发现竟然是组件的一个属性，- -！
剪切：oncut
复制：oncopy
粘贴：onpaste
这三样属性主要针对的是文本组件，比如<input type="text"/>,<textarea></textarea> ,<p></P>等，需要注意的是p标签需要注意contenteditable="true"（可编辑，又涨姿势了~~）这个属性。准确的讲这是三个时间，可以在触发时执行相应的脚本。
例子：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <p>该实例演示了如何向 input 元素中添加 "oncut" 事件。</p> 6 7 <input type="text" oncut="myFunction()" value="尝试剪切该文本"> 8 <textarea oncut="myFunction()">ddd</textarea> 9 <input type="text" oncut="return false;" value="设为return false你将无法剪切"> 10 <script> 11 function myFunction() { 12 alert("你剪切了文本!"); 13 } 14 </script> 15 16 </body> 17 </html> 18
例子：
<!DOCTYPE html> <html> <body> <p>该实例演示了如何向 input 元素中添加 "oncut" 事件。</p> <input type="text" oncopy="myFunction()" value="尝试复制该文本"> <textarea oncopy="myFunction()">ddd</textarea> <input type="text" oncopy="return false;" value="设为return false你将无法复制"> <script> function myFunction() { alert("你复制了文本!"); } </script> </body> </html>
<!DOCTYPE html> <html> <body> <p>该实例演示了如何向 input 元素中添加 "oncut" 事件。</p> <input type="text" onpaste="myFunction()" value="尝试粘贴"> <textarea onpaste="myFunction()">ddd</textarea> <input type="text" onpaste="return false;" value="设为return false你将无法粘贴"> <p contenteditable="true" onpaste="myFunction()">尝试在段落中粘贴内容。</p> <script> function myFunction() { alert("你剪切了文本!"); } </script> </body> </html>
注意事项：
1、<p>元素如果要让这oncut和onpaste可用，则必须要把contenteditable="true"加上，毕竟能编辑才能谈剪切复制嘛
2、如果要禁用这三样功能，那么把属性值设为“return false;”,只是设为false是不行的。而且，“return false;”写在方法最后作为返回值是没有用的，比如：
<p contenteditable="true" onpaste="myFunction()">尝试在段落中粘贴内容。</p> <script> function myFunction() { alert("你剪切了文本!"); return false; //这里是不起任何作用的 } </script>
3.上面只是列举了在html中使用，那么如何在js中使用下面举个例子：
<!DOCTYPE html> <html> <body> <p>该实例演示了如何使用 HTML DOM 向 input 元素中添加 "onpaste" 事件。</p> <input type="text" id="myInput" value="尝试在此处粘贴文本" size="40"> <input type="text" id="myInput2" value="尝试在此处粘贴文本2" size="40"> <script> document.getElementById("myInput").onpaste = function(){return false;}; document.getElementById("myInput2").onpaste = function() {myFunction()}; function myFunction() { alert("你粘贴了文本!"); } </script> </body> </html>
需要注意的是，你必须要用匿名函数function将你的方法包起来，function() {myFunction()}，看到这里应该明白为什么在属性中如果只是写false，或者把方法的返回值设为false没有用了吧。
那么还有一些小遗憾，如果我既不想让组件使用粘贴功能，但又希望在他用粘贴功能的时候进行一些操作，怎么办？根据上面的js代码，我们想到了方法：在你的代码中加入返回值，并且把整个方法作为结果进行返回
<!DOCTYPE html> <html> <body> <p>该实例演示了如何使用 HTML DOM 向 input 元素中添加 "onpaste" 事件。</p> <input type="text" id="myInput" value="尝试在此处粘贴文本" size="40" onpaste="return myFunction();"> <script> function myFunction() { alert("你粘贴了文本!"); return false; } </script> </body> </html>
以上代码全部火狐亲测，火狐版本37.0.2
标签：
原文地址：http://www.cnblogs.com/andong2015/p/4515181.html
