Saturday, October 11, 2008

Javascript event handler for text cut/paste/copy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>some javascript element event example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>

<body>
<h3>Element.onpaste</h3>
<textarea id="editor" rows="3" cols="80" onpaste="pasteIntercept(event);">
Try pasting text into this area!
</textarea>

<h3>Log</h3>
<textarea rows="5" cols="80" id="log" readonly="true"></textarea>

<h3>Element.oncontextmenu</h3>
<div oncontextmenu="return false;" style="border: #ddd 1px solid; width: 642px; color: #369;">
prevent element context menu<br>
阻止此元素上的右键菜单弹出
</div>

<h3>Element.oncut and Element.copy</h3>
<input type="text" size="80" name="preventpaste" value="text can't be cut or copy!" oncut="return false" oncopy="return false"/>

<script type="text/javascript">
function log(txt)
{
document.getElementById("log").appendChild(document.createTextNode(txt + "\n"));
}

function pasteIntercept(event)
{
log("Pasting!");
event.preventDefault(); // event.returnValue = false; // IE
return false;
}
</script>

</body>
</html>

以上的几个方法在IE/Safari/Firefox3里都有对应的实现,在firefox3中测试通过,firefox2和opera未测试,应该还没有支持这些事件处理器。
Reference:
http://developer.mozilla.org/en/DOM/element.onpaste

No comments :