5

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 an input field.

I'm using

  • Cordova 3.6.3
  • Ionic Framework 1.2.8
  • IOS 8.1.1

4 Answers 4

14

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

5
  • It did seem to open up the IOS input panel, but it did not allow me to copy / past anything. Do you know what problem this could be? Dec 19, 2014 at 17:55
  • I was looking into this and I installed ionic 1.2.13. I put an input an it allows to copy/paste inside it without css overwriting. Try updating to ionic 1.2.13 Dec 20, 2014 at 23:39
  • I used the above fix successfully and then I encountered a bug where on iOS devices copy and paste stopped working at some point until the app was restarted. I found that the bug occurred after the loading animation was displayed. The fix was to ensure that when the loading animation was dismissed that the two divs were hidden using display: none as follows: .backdrop { display: none; } .backdrop.visible { display: block; } .loading-container:not(.visible) { display: none; } Feb 2, 2015 at 21:04
  • Thanks for this answer. I would like to add that if you want to enable the text selection in Firefox instead of auto, you'll next to set the value to 'all'. That is: -moz-user-select: all Aug 18, 2016 at 15:08
  • I've been testing and wasn't able to make it work with all Aug 22, 2016 at 20:25
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; 
  }
0

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...

0

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; }

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.