之前以为禁用剪切，复制，粘贴得整一大堆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