contentEditable问题，请大家帮忙解答

<body>
<input type="image" src="image/page_copy.png" name="copy"></input>
<input type="image" src="image/page_paste.png" name="paste"></input>
<input type="image" src="image/cut.png" name="cut"></input>
<div id="editable" contentEditable="true">
111111111111
</div>
<script type="text/javascript">
var btn = document.getElementsByTagName("input");
for(var i=0;i<btn.length;i++){
btn[i].onclick=function(){return onEffect(this.name,null);};
}
function onEffect(effect,argument){
document.execCommand(effect,false,argument);
}
</script>
</body>
<body>
<button name="cut">剪切</button>
<button name="copy">复制</button>
<button name="paste">黏贴</button>
<div id="editable" contentEditable="true">
111111111111111111111111111111111
</div>
<script type="text/javascript">
var btn = document.getElementsByTagName("button");
for(var i=0;i<btn.length;i++){
btn[i].onclick=function(){return onEffect(this.name,null);};
}
function onEffect(effect,argument){
document.execCommand(effect,false,argument);
}
</script>
</body>
为什么第二段程序可以实现剪切，复制，粘贴，而第一段程序没办法实现