html文本框监听粘贴,HTML5将粘贴板上的图片粘贴到文本框中

小C的第一篇技术贴，不知道怎么写，就随便写点了，如果内容不是很好还请大家见谅，尽量给小C提点建议，遇到出错的地方请告诉小C，小C会根据错误的严重程度给大家发红包，小C在这里非常感谢了。

在一次开发中遇到这样一个需求可以将粘贴板的图片粘贴到文本框中。当时我用的是textarea，但textarea不可以将图片显示出来，经过我一番百度发现我们可以通过HTML5中的contenteditable属性将div变成一个可以编辑的div。

contenteditable 属性规定是否可编辑元素的内容。

值

描述

true

规定可以编辑元素内容。

false

规定无法编辑元素内容。

classname

继承父元素的 contenteditable 属性。

文本框做好了现在我们就可以来将粘贴板上的图片粘贴到文本框上了(就是可编辑的div)。

这个和 HTML5 没有太大关系，网页浏览器很早就有这个标准了，不同浏览器下的实现接口略有区别。

粘贴(包括富文本、图片等各种格式的内容)是利用了 contentEditable div 的 onPaste 事件。Chrome提供了访问粘贴板中二进制数据的接口(clipboardData.items)，并提供了将其转换为文件的方法(getAsFile)。

window.addEventListener('load', function (e) {

document.body.onpaste = function (e) {

var items = e.clipboardData.items;

for (var i = 0; i < items.length; ++i) {

if (items[i].kind == 'file' &&

items[i].type.indexOf('image/') !== -1) {

var blob = items[i].getAsFile();

window.URL = window.URL || window.webkitURL;

var blobUrl = window.URL.createObjectURL(blob);

var img = document.createElement('img');

img.src = blobUrl;

var logBox = document.getElementById('textarea');

logBox.appendChild(img);

}

}

};

});