How to make text selectable?

ionic-v1
21

I add an attribute “data-tap-disabled=true” ,but I find it can’t scrolling,Has a solution for this?thanks

1 Like
22

Hi plesae try this http://codepen.io/DaDanny/pen/ojQEox, It does modify the ionic.js but I havnt faced any side-effects, hope this helps.

1 Like
23

I couldn’t get the suggested solutions working without changing Ionic source, which I didn’t want to do. After quite a while, I have a solution that doesn’t require changing the Ionic source. It works for a long-press of a word.

I’m using Blast.js in a directive to wrap each word in a span tag like this:

    link: function(scope, element, attrs, ctrl) {
        $timeout(function() {
            element.blast({delimiter: "word", aria: false});
        });

        element.on('hold', 'span.blast', (event) => ctrl.handleHoldEvent(event));
        ctrl.parentElement = element;
    }
    
handleHoldEvent(event) {
    	this.selectText(event.target);
    	this.showActionSheet();
};
	
	selectText(element) {
    	this.selectedElement = angular.element(element);
    	this.selectedElement.addClass("my-class");
        this.selectedText = _.trim( this.selectedElement.text(), '`~!@#$%^&*()_+-=[]{}|;:"“”‘’,\\./<>?—' );
	}
	
	deselectText() {
		this.selectedElement.removeClass("my-class");
		this.selectedText = '';
		this.selectedElement = null;
	}
	
	$onDestroy() {
		this.parentElement.off('hold', 'span.blast', (event) => this.handleHoldEvent(event));
	}}

The main drawbacks of this are having a span for each word, and each span is another DOM element with event listeners. However, there is only 1 event handler using delegated events (see jQuery .on() docs). I’ve tried it on a few phones and don’t see any problems (for about a 1,000 word paragraph), but this hasn’t been through QA yet.

If anyone has ideas to improve this, let me know! I can try to put together a codepen when I get a chance.

1 Like
24

Working, copy texts of app

1 Like
25

I got it working without modifying ionic.js.

The trick is to replace text you want to be able to select with input field with attribute readonly. Ionic doesn’t prevent click/touch events from input fields so you don’t have to modify ionic.js. However, you’ll need to set user-select:text to enable text selection. The rest of CSS is just trying to make input field look like regular text.

HTML:

<p selectable-text>You'll be able to copy the text of this awesome paragraph.</p>

JS:

directive("selectableText", function() {
return {
  restrict: "A",
  template: function(element) {
    return '<input type="text" readonly value="'+element[0].textContent+'">';
  }
};

})

CSS:

.scroll {
  -webkit-user-select: text;
  user-select: text;
}

*[selectable-text] input {
  cursor:text !important;
  background:inherit !important;
  font-size:inherit;
  width:100%;
  /* etc. You should style it as you want so that it looks natural, not like an input field. */
}
1 Like
26

This solution only works in Android if the text is not an html. @davor_leric

27

thanks!
it works beautifully on my android app.

1 Like