I want users to be able to select text content so that they can copy it and paste it elsewhere, but it seems that text selection has been disabled. Users can select text that is in an input or a textarea, but I want them to be able to select even regular content text. Is there a way to re-enable text selection?
CodePen: http://codepen.io/anon/pen/yplfg
YouTube Demo:
I found a working solution for web and iOS versions, but I’m not sure if there will be any unexpected side effects from making these changes. At the moment I am using ionic-v1.0.0-beta.4.
Step 1 - Add this to your CSS:
.scroll {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
Step 2 - In ionic.js, change this line:
stop_browser_behavior: 'disable-user-behavior'
… to this:
stop_browser_behavior: false
Step 3 - Also in ionic.js, comment out the “e.preventDefault();” line in this part:
self.touchStart = function(e) {
self.startCoordinates = getPointerCoordinates(e);
if ( ionic.tap.ignoreScrollStart(e) ) {
return;
}
if( ionic.tap.containsOrIsTextInput(e.target) ) {
// do not start if the target is a text input
// if there is a touchmove on this input, then we can start the scroll
self.__hasStarted = false;
return;
}
self.__isSelectable = true;
self.__enableScrollY = true;
self.__hasStarted = true;
self.doTouchStart(e.touches, e.timeStamp);
e.preventDefault();
};
… so that it looks like this:
self.touchStart = function(e) {
self.startCoordinates = getPointerCoordinates(e);
if ( ionic.tap.ignoreScrollStart(e) ) {
return;
}
if( ionic.tap.containsOrIsTextInput(e.target) ) {
// do not start if the target is a text input
// if there is a touchmove on this input, then we can start the scroll
self.__hasStarted = false;
return;
}
self.__isSelectable = true;
self.__enableScrollY = true;
self.__hasStarted = true;
self.doTouchStart(e.touches, e.timeStamp);
// e.preventDefault();
};
Note: Step 3 seemed to break the scrolling feature when testing this solution for an Android app, but this solution seems to work when tested on the desktop web, mobile web, and in an iOS app.
Your solution doesn’t work in the latest ionic.
Feng, are you referring to using this technique on mobile or desktop?
On mobile it still seems to be working for me, but If it isn’t working for you on desktop, that might be because it doesn’t work if the user can use their mouse to click-and-drag to scroll the page. To disable this type of scrolling you can either enable overflow-scroll on your content:
<ion-content overflow-scroll="true">
Or you can disable the mouse click-and-drag-to-scroll events by further changing ionic.js like so…
Add ‘return;’ to the beginning of this mouseDown function:
self.mouseDown = function(e) {
if ( ionic.tap.ignoreScrollStart(e) || e.target.tagName === 'SELECT' ) {
return;
}
self.doTouchStart(getEventTouches(e), e.timeStamp);
if( !ionic.tap.isTextInput(e.target) ) {
e.preventDefault();
}
mousedown = true;
};
So that it looks like this:
self.mouseDown = function(e) {
return; // <--- This disables all mouseDown events from scrolling the page
if ( ionic.tap.ignoreScrollStart(e) || e.target.tagName === 'SELECT' ) {
return;
}
self.doTouchStart(getEventTouches(e), e.timeStamp);
if( !ionic.tap.isTextInput(e.target) ) {
e.preventDefault();
}
mousedown = true;
};
This change makes it so you can still use the ionic scroll features with your mouse wheel, but disables mouse click-and-drag scrolling so that you can use your mouse to select text.
It works now. Thanks for your help.
EDIT: Nevermind. I had to add overflow-scroll=“true” to get it to work on iOS.
On ionic 1.2.8 I’m able to select text but I’m getting the overscroll effect when trying to scroll. I want to be able to scroll and select. Is that a pipe dream?
Hi Brett (or anyone else), ever find an answer to this? Is there a solution for allowing text selection / copy & pasting as well as scrolling?
Hi Elliot, is there a way to allow text selection but also allow scrolling by dragging? Would definitely like this for a mobile app… Thanks!
For Android I’m not sure, but it should work on iOS.
Is there a way to select text without changing the source of Ionic? Also, how about image selection?
Maybe not what you want but content marked with the attribute contenteditable='true' is selectable
Try to add an attribute “data-tap-disabled=true” to your text holder element and add the style “-webkit-user-select: auto”
Try to add an attribute “data-tap-disabled=true” to your text holder element and add the style “-webkit-user-select: auto”
Thanks for your suggestion. But it doesn’t work for me. I add the attribute and style to a div with text but long-tap still doesn’t show the copy/paste popup. Does this work for anyone else or is it just me?
It works now. it work perfect
I’m still having trouble with this.
Selecting text works fine on android with native scroll, but on iOS the scroll seems to break selecting text. Has anyone been able to get this to work?
Just popping in to say your solution worked. You -can- grab the scroll view instance itself from $ionicScrollDelegate.$getByHandle(‘my-handle’).getScrollView() and override the touchStart method. However, this does so within the scope of your controller, which ruins everything.
I am not happy about having to modify the source code instead of extending it, but my app is functional. Thank you!
it can be copy,but it’s not scrolling
Hi Anybody find solution for this, without editing the main ionic.js file
also interested to know