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
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
.backdrop { display: none; } .backdrop.visible { display: block; } .loading-container:not(.visible) { display: none; }
Feb 2, 2015 at 21:04
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;
}
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...
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; }