4

Trato de que el div sea editable pero al primer intento no funciona, luego si funciona, ¿cuál es el error?

pruébenlo haciendo click en la frase

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>

1 respuesta 1

6

El problema es que al hacer click con el botón derecho, estás haciendo que el div sea editable (inicialmente no lo era) al añadir contentEditable... pero eso es todo. Que sea editable, no quiere decir que automáticamente se entre en la edición, para eso tienes que pulsar una segunda vez (que es el comportamiento que ves).

Si lo que quieres es hacer que al hacer click el div se haga editable Y se entre en la edición, entonces además de ponerle el contentEditable deberías enfocar el elemento (con focus). Sólo tendrías que añadir una línea de código:

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

Aquí lo puedes ver funcionando:

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.