Question

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

然而，在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解雇仅用于＆＃34;仅限文字＆＃34;字段无论内容类型或我是否必须根除此页面中的所有<textarea>和文本字段？我已经阅读过使用<div/>作为文字输入的内容，这可能有用，但我希望有更好的方法。

编辑：我尝试从false返回onbeforepaste，但这似乎没什么帮助。以下不会在IE中为非文本触发一个onpaste事件：

Enter some text: 
<textarea id="txtTest"
          onbeforepaste="alert('before paste'); return false;"
          onpaste="alert('pasting'); return true;"
          ></textarea>

Answer 1

啊哈!!! onbeforepaste事件是针对此问题而构建的。

您认为从false onbeforepaste返回<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>）上：

<configuration>
   <generator>
     <config>
       <spring-boot>
          <webPort>8080</webPort>
          <!-- dont expose jolokia -->
          <jolokiaPort>-1</jolokiaPort>
          <prometheusPort>9999</prometheusPort>
       </spring-boot>
     </config>
   </generator>
</configuration>

然后似乎甚至在IE中工作。

Answer 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>

在textarea上没有为图像数据触发onpaste事件

2 个答案: