Question

未捕获的类型错误：无法读取未定义的属性“getData”

2017-01-16

20353

javascript jquery

我正在尝试处理粘贴事件并尝试将富文本转换为纯文本，我在容器内有一个内容可编辑（动态创建）的 div，其 id 为 main

$("#main").on("paste","div",function(event){
  event.preventDefault();
  var clipboarddata =  event.clipboardData ||window.clipboardData || event.originalEvent.clipboardData;                  
  var onlytext = clipboarddata.getData('text/plain');
  document.execCommand("insertHTML", false, onlytext);
});

Uncaught TypeError: Cannot read property 'getData' of undefined

我认为 event.clipboarddata 不起作用，我的浏览器支持剪贴板 API。我正在复制文本并将其粘贴到 div 中。因此剪贴板应该有一些值

有人可以解释为什么我的 clipboardData 未定义

Answer 1

对于最新的 Chrome 浏览器，以下行将起作用。

var clipboarddata = window.event.clipboardData.getData('text');

$(document).ready(function(){

 $("#main").on("paste",function(event){
      event.preventDefault();
      var clipboarddata =  window.event.clipboardData.getData('text');    
      console.log("paste value" + clipboarddata);
      $('#pasteData').text(clipboarddata);
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="main" name="first_name" value="" maxlength="100" />
<div>paste value :  <span id="pasteData"><span></div>

Answer 2

注意：这就是您收到错误 的原因 。修复错误是另一回事，需要您提供更多信息。

您收到错误的原因是，当您在变量赋值上使用 OR 运算符时，它将始终分配最后一个的值，即使它是 null 、 false 或 undefined 。

基本上是这样的

if (event.clipboardData != null/false/undefined) { //ignore the incorrectness of the truncation
  var clipboarddata = event.clipboardData;
} else if (window.clipboardData != null/false/undefined) {
  var clipboarddata = window.clipboardData;
} else { //default to the last option even if it is null/false/undefined
  var clipboarddata = event.originalEvent.clipboardData;
}

因此，由于这三个都是 undefined ，您将获得 event.originalEvent.clipboardData 的值，该值已分配给变量 undefined 。因此下一行出现错误。