Can't copy / paste in PhoneGap Ionic IOS

Question

I\'m using PhoneGap to build an app in IOS and it is almost done.

I just ran into a small problem. The user doesn\'t seem to be able to copy / past his content in a

Answer 1

Based on @jcesarmobile answer. This has worked for me. Ionic 2 , beta 10.

 .selectable{
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: all;
    -ms-user-select: auto;
    -o-user-select: auto;
    user-select: auto; 
  }

Answer 2

try adding this css

   input, textarea {
        -webkit-user-select: auto !important;
        -khtml-user-select: auto !important;
        -moz-user-select: auto !important;
        -ms-user-select: auto !important;
        -o-user-select: auto !important;
        user-select: auto !important;  
  }

I suppose ionic includes some css to avoid the copy/paste as usually the apps don't allow you to copy their content

Answer 3

Kludgy and only on desktops, but I use something like this:

  .directive('selectable', [function () {
    return {
      restrict: 'A',
      priority: 2000,
      link: function (scope, ele, attrs) {
        var element = ele[0];
        function leave() {
          element.blur();
          element.setAttribute('contenteditable', 'false');
        }
        function keydown(e){
          switch(e.which) {
            case 33: // pageup
            case 34: // pagedown
            case 35: // end
            case 36: // home
            case 37: // left
            case 38: // up
            case 39: // right
            case 40: // down
            case 16: // shift
            case 17: // ctrl
            case 91: // meta
              return;

            default:
              //CTRL-A /CTRL-C?
              if((e.keyCode === 'C'.charCodeAt(0) || e.keyCode === 'A'.charCodeAt(0)) && (e.ctrlKey || e.metaKey)) {
                return;
              }
              console.log(e);
              break;
          }

          leave();
        }
        function mouseDown(){
          element.setAttribute('contenteditable', 'true');
        }
        element.addEventListener('mousedown', mouseDown);
        element.addEventListener('keydown', keydown);
        element.addEventListener('cut', leave);
        element.addEventListener('paste', leave);
        ele.on('$destroy', function () {
          element.removeEventListener('mousedown', mouseDown);
          element.removeEventListener('keydown', keydown);
          element.removeEventListener('cut', leave);
          element.removeEventListener('paste', leave);
        });

      }
    };
  }])

if you are willing to edit ionicXXX.js, you could also check for a class or attribute anywhere they check isContentEditable...

Answer 4

I had the same issue and was using loading panels in my app

the css fix provided by @Adam worked

.backdrop { display: none; } 
.backdrop.visible { display: block; } 
.loading-container:not(.visible) { display: none; }