How to make text selectable?

ionic-v1
1

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:

2 Likes
2

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.

2 Likes
3

Your solution doesn’t work in the latest ionic.

1 Like
4

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.

3 Likes
5

It works now. Thanks for your help.

6

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?

7

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?

8

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!

1 Like
9

For Android I’m not sure, but it should work on iOS.

1 Like
10

Is there a way to select text without changing the source of Ionic? Also, how about image selection?

2 Likes
11

Maybe not what you want but content marked with the attribute contenteditable='true' is selectable

1 Like
12

Try to add an attribute “data-tap-disabled=true” to your text holder element and add the style “-webkit-user-select: auto”

3 Likes
13

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?

1 Like
14

It works now. it work perfect

1 Like
15

@rahul54784 What was your solution ?

Thanks

1 Like
16

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?

1 Like
17

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!

1 Like
18

it can be copy,but it’s not scrolling

1 Like
19

Hi Anybody find solution for this, without editing the main ionic.js file

1 Like
20

also interested to know

1 Like