之前以为禁用剪切，复制，粘贴得整一大堆js，结果今天一查，发现竟然是组件的一个属性，- -！
剪切：oncut
复制：oncopy
粘贴：onpaste
这三样属性主要针对的是文本组件，比如<input type="text"/>,<textarea></textarea> ,<p></P>等，需要注意的是p标签需要注意contenteditable="true"（可编辑，又涨姿势了~~）这个属性。准确的讲这是三个时间，可以在触发时执行相应的脚本。
oncut
例子：
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
oncopy
例子：
<!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>
onpaste
<!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
时间： 2024-11-10 13:07:18