How to make text selectable?

ionic-v1
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