未在图像数据的 TextArea 上触发 OnPaste 事件

onpaste event not fired on textarea for image data

提问人：ebyrob 提问时间：3/30/2017 最后编辑：ebyrob 更新时间：4/3/2017 访问量：2419

问：

我有一个工作页面用于上传描述。我添加了屏幕截图支持，该支持适用于 Firefox 52，并且应该适用于 Chrome。<textarea><input type="file">onpastetextarea

但是，在 IE 中，不会以非文本数据为重点触发。onpaste<textarea>

HTML 测试页（为简洁起见，IE 仅）：

<!DOCTYPE html><html><head><meta charset="UTF-8"/></head><body><form>
<script type="text/ecmascript">
function tb_pasted(e) {
   document.getElementById('txtTest').value += ' evtfired ';
   var s = "data: " + clipboardData.getData("Text") + "\n";
   var numFinished = 0; var numStarted = 0;
   for( var i=0; i<clipboardData.files.length; ++i ) {
      ++numStarted;
      var file = clipboardData.files[i];
      var fileReader = new FileReader();
      fileReader.onload = function () {
          var base64Data = fileReader.result
          s += " s:" + file.size + " d:" + fileReader.result.substring(10, 30) + "\n";
          ++numFinished;
      }
      fileReader.readAsDataURL(file);
   }
   function alertWhenDone() { 
      if( numFinished >= numStarted ) alert(s);
      else setTimeout(alertWhenDone, 100);
   }
   alertWhenDone();
   return false;
}
</script>
nofire on image: <br/><textarea id="txtTest" onpaste="return tb_pasted(event);"></textarea>
<br/><br/>always fires: <br/><div id="divTest" contenteditable="true"
     style="background-color:yellow; width:100px; height:100px;"
     onpaste="return tb_pasted(event);"></div>
</form></body></html>

有没有办法无论如何都可以为“纯文本”字段触发，无论内容类型如何，或者我是否必须从此页面中删除所有文本字段？我已经阅读了有关用作文本输入的文章，这可能会起作用，但我希望有更好的方法。onpaste<textarea><div/>

编辑：我试着从那里回来，这似乎根本没有帮助。以下不会在 IE 中为非文本触发粘贴事件：falseonbeforepaste

Enter some text: 
<textarea id="txtTest"
          onbeforepaste="alert('before paste'); return false;"
          onpaste="alert('pasting'); return true;"
          ></textarea>
JavaScript Internet-Explorer Internet-Explorer-11 复制粘贴

评论

0赞 Rob Parsons 3/31/2017
在 IE 中，剪贴板访问还受域的 IE 安全区域设置的影响。使用“文件”>“属性”菜单查找测试站点映射到的 IE 安全区域。预期的互联网。
0赞 ebyrob 3/31/2017
@RobParsons 谢谢你。我认为它适用于一个元素，所以我希望它与安全设置无关。（在我的测试中，我正在从本地硬盘驱动器运行一个 HTML 文件，我确实收到有关我必须允许的功能的警告）<div>
0赞 Rob Parsons 3/31/2017
听起来您正在使用浏览器的编辑模式......你能发布更多的代码或JSFidddle吗？
0赞 ebyrob 3/31/2017
@RobParsons 我已经用代码示例更新了这个问题。我以为它会变得太长，但我想这比冗长的书面描述要好。
0赞 Rob Parsons 4/2/2017
应仅使用输入 type=“file” 来选择文件集合。它将访问文件剪贴板数据收集的粘贴命令。将文件剪贴板数据粘贴到 TextArea 或 TextInput 元素中将转换为文本，而不是 files 集合。

答：

1赞 ebyrob 3/30/2017 #1

啊哈！！！ event 就是为这个问题而构建的。onbeforepaste

你会认为这就像从论坛回来一样简单，但这似乎并没有让活动火起来。falseonbeforepaste<textarea>onpaste

但是，如果您与非文本元素（如）：return false.focus()<div>

 nofire on image: <br/>
 <textarea id="txtTest" 
     onpaste="return tb_pasted(event);"
                                                fix="*** \/ ***"
     onbeforepaste="document.getElementById('divTest').focus();  return false;"
                                                fix="*** /\ ***"
     ></textarea><br/><br/>
 always fires: <br/>
 <div id="divTest" contenteditable="true"
     style="background-color:yellow; width:100px; height:100px;"
     onpaste="return tb_pasted(event);"></div>

然后似乎即使在IE中也可以工作。

0赞 Rob Parsons 4/2/2017 #2 
<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
html,body{
    margin:0px;padding:0px;height:100%; background-color:black;
}
#divtoolbar{
    position:fixed;
    top:0;left:0;width:100%;
}
#divContent{

}
#preview{

}
img.obj{
    max-width:320px;
}
img.obj.fullscreen{
    max-width:none;width:auto;height:auto;margin:auto;overflow:visible!important;
}
ul{
    padding:0px;list-style:none;background-color:black;
}
*:hover{
    outline:red dotted thick;
}
</style>
<script type="text/javascript">
function toggleFullScreen(evt) {
var el=evt.target;
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    el.className='obj fullscreen'; 
    el.oncontextmenu=function(){return false;}
    if (el.requestFullscreen) {
      el.requestFullscreen();
    } else if (el.msRequestFullscreen) {
      el.msRequestFullscreen();
    } else if (el.mozRequestFullScreen) {
      el.mozRequestFullScreen();
    } else if (el.webkitRequestFullscreen) {
      el.webkitRequestFullscreen(el.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    el.className='obj';
    el.oncontextmenu=null;
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
  evt.stopPropagation();
  evt.preventDefault();
}

function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /image.*/;

    if (!file.type.match(imageType)) {
      continue;
    }

    var img = document.createElement("img");
    var el= document.createElement('li');
    img.classList.add("obj");
    img.file = file;
    img.addEventListener('dblclick',toggleFullScreen,false);
    el.appendChild(img)
    preview.appendChild(el); // Assuming that "preview" is a the div output where the content will be displayed.
    var reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result;aImg.scrollIntoView(true); }; })(img);
    reader.readAsDataURL(file);
  }
}
</script>
<title>filereader</title>
</head>

<body>
<div id="divtoolbar">
<input type="file" name="filselect" id="filselect" multiple accept="image/*,audio/*,video/*" style="width:100%" onchange="handleFiles(this.files);"/>
</div>
<div id="divContent">
<ul id="preview"></ul>
</div>
</body>

</html>

评论

0赞 ebyrob 4/3/2017
全屏与此有什么关系？正如我之前所说，我已经在此页面上进行了基本的文件上传。我的整个目标是让用户在文本字段中输入能够或屏幕截图，而不是打开图像编辑器、保存文件、单击查找文件等。Ctrl-Vright-click->Pastebrowse...
0赞 Rob Parsons 4/4/2017
它在我手边的文件 api 测试页面中。您的原始问题和帖子显示您正在使用 <textarea> 元素。不是 file input 元素。
0赞 ebyrob 6/22/2017
是的，没错，我正在使用 a 创建一个“富文本”控件，其中我要接受粘贴的一种数据类型是文件数据（或文件描述符）。想想带有邮件正文的电子邮件表单，其中粘贴文件会变成附近的“额外”回形针。上面的代码只是一个简单的概念验证示例。textareatextarea

上一个：如何增加最大标识符名称长度？

下一个：SwiftUI - WebView