Javascript操作剪切板数据（支持IE、Chrome、360、搜狗）

最新推荐文章于 2022-05-23 10:55:36 发布

lelele1990

最新推荐文章于 2022-05-23 10:55:36 发布

阅读量1.5w

点赞数

分类专栏：成功经验

成功经验专栏收录该内容

66 篇文章 1 订阅

订阅专栏

近日，项目上需要在WEB页面上操作剪切板中的数据，经过一顿搜索，终于找到了一个比较完美的解决办法。

当然，在实际应用时还要自行修改一下。经过测试，目前支持IE、Chrome、360、搜狗等浏览器，其它浏览器还未验证。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<script>
	var EventUtil = {
	    addHandler: function (element, type, handler) {
	        if (element.addEventListener) {
	            element.addEventListener(type, handler, false);
	        } else if (element.attachEvent) {
	            element.attachEvent("on" + type, handler);
	        } else {
	            element["on" + type] = handler;
	        }
	    },
	    getEvent: function (event) {
	        return event ? event : window.event;
	    },
	    getClipboardText: function (event) {
	        var clipboardData = (event.clipboardData || window.clipboardData);
	        return clipboardData.getData("text");
	    },
	    setClipboardText: function (event, value) {
	        if (event.clipboardData) {
	            return event.clipboardData.setData("text/plain", value);
	        } else if (window.clipboardData) {
	            return window.clipboardData.setData("text", value);
	        }
	    },
	    preventDefault: function (event) {
	        if (event.preventDefault) {
	            event.preventDefault();
	        } else {
	            event.returnValue = false;
	        }
	    }
	};
	</script>
</head>

<body>
<form name="f1">
文本框：<input type="text" name="textbox1" id="textbox1" value=""/>
</form>
</body>
<script>
var textbox = document.forms[0].elements["textbox1"]
EventUtil.addHandler(textbox, "paste", function (event) {
    event = EventUtil.getEvent(event);
    var text = EventUtil.getClipboardText(event);
    alert(text);
    //if (!/^\d*$/.test(text)) {
        //EventUtil.preventDefault(event);//非数字则取消粘贴
    //}
});

</script>
</html>

参考自：http://www.w3cmm.com/javascript/operation-clipboard.html