Home / Questions / 96744
Accepted
hubman
Asked: 2020-08-23 17:48:22 +0800 CST 2020-08-23 17:48:22 +0800 CST

right click to edit div

  • 772

I try to make the diveditable but at first try it doesn't work, then if it works, what's wrong?

try it by clicking on the phrase

var app = angular.module('plunker', []);

app.directive('rightClick', function() {

  document.oncontextmenu = function(e) {
    if (e.target.hasAttribute('right-click')) {
      return false;
    }
  }

  return function(scope, el, attrs) {
    el.bind('contextmenu', function(e) {
      document.getElementById('op').contentEditable = 'true';
    });
  }

});



app.controller('MainCtrl', function($scope) {

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script src="app.js"></script>


<body ng-app="plunker" ng-controller="MainCtrl">
  <div id="op" right-click alert="You right clciked me">Right click me</div>
</body>

angularjs

1 Answers

  1. Best Answer

    The problem is that by right-clicking, you're making the diveditable (initially it wasn't) by adding contentEditable... but that's about it. That it is editable, does not mean that it automatically enters the edition, for that you have to press a second time (which is the behavior you see).

    If what you want is to make divit editable when you click it AND enter the edition, then in addition to putting the contentEditableyou should focus the element (with focus). You would only have to add a line of code:

    document.getElementById('op').focus();

    Here you can see it working:

    var app = angular.module('plunker', []);

app.directive('rightClick', function() {

  document.oncontextmenu = function(e) {
    if (e.target.hasAttribute('right-click')) {
      return false;
    }
  }

  return function(scope, el, attrs) {
    el.bind('contextmenu', function(e) {
      document.getElementById('op').contentEditable = 'true';
      document.getElementById('op').focus();
    });
  }

});



app.controller('MainCtrl', function($scope) {

});
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script src="app.js"></script>


<body ng-app="plunker" ng-controller="MainCtrl">
  <div id="op" right-click alert="You right clciked me">Right click me</div>
</body>

    • 6