【问题标题】:ngPaste on contentEditable divngPaste on contentEditable div
【发布时间】:2016-01-18 11:04:08
【问题描述】:

我在 contentEditable div 上使用ngPaste,而不是输入类型的文本。但是,我无法以 link. 中提到的方式获取粘贴的内容,我的处理程序中总是未定义 ngPaste。代码如下:

HTML:

<div contentEditable="true" ng-paste="stripHtml($event.clipboardData.getData('text/plain'))">
</div

>

JS:

scope.stripHtml = function(content) {
    console.log(content); //this is always undefined
}

我做错了什么?如何获取粘贴的内容?

【问题讨论】:

  • 你的 AngularJS 版本? >1.2?
  • 是的。对不起。它也支持可编辑元素。
  • 没问题,有其他解决方案吗?
  • 我只是在尝试。可以分享平台,浏览器版本吗?
  • 平台在?浏览器是 Chrome 42.something。

标签: javascript html angularjs


【解决方案1】:

下面的代码(从 Sergey 修改)在 Windows 平台、Firefox 43.0.4、Chrome 47.0.2526.111 m 中工作,但不在 IE 11.0.9 中。

<!DOCTYPE html>
<html>
<head>

<style>

.editable {
  background: white;
  height: 55px;
  border: 2px solid blue;
  width: 55%;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>

<script>

var myApp = angular.module('myApp', []);
myApp.controller('sampleController', function($scope) {

    $scope.stripHtml = function(content) {
       alert(content);
       console.log(content); 
    };

});

</script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>AngularJS ng-paste within ContentEditable Div</title>
</head>
<body ng-app="myApp">
  <div ng-controller="sampleController">

    <div class="editable" contentEditable="true" ng-paste="stripHtml($event.clipboardData.getData('text/plain'))"></div>

  </div>
</body>
</html>

【讨论】:

  • 但是函数被调用了。如果内容可编辑不支持 ngPaste,则 ngPaste 的函数处理程序甚至不应该被调用。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-07-28
  • 2013-07-11
  • 1970-01-01
  • 1970-01-01
  • 2017-11-05
  • 2015-11-17
相关资源
最近更新 更多