Ability to create readonly elements that can be selected by users

[robdmoore]

I have a requirement for an app I'm building to have an area on the screen that is readonly, but the user can select in order to use the copy command.

As per #421 at the moment you can only select text in form elements and contentEditable divs so I propose that there is a way to add a control where you opt in to allowing selection.

I'm more than happy to implement it and send through a PR, but some initial brainstorming on the best approach to opt in (or letting me know if you have a fundamental objection to it) would be great before I start.

[adamdbradley]

One question I have is, how is this different then contentEditable? If you could create either a codepen or pull request to show how it would work we'd be happy to review it. However, I may not be understanding the problem and solution entirely, but this feature sounds rather specific and may not be a good fit to go into the core, but rather a contribute file.

[robdmoore]

The difference is the fact I want the data that they select to be readonly - contentEditable is about making the content editable?

Happy to make a contribute file if you think that's the right way to go, but given the code that disables the user interaction is buried in the core in "private" code that can't be monkey patched I'm not sure how so any guidance would be fantastic :)

[adamdbradley]

So it sounds like something similar to how we have http://ionicons.com

If you click the classname for any icon it'll auto select it, but the input is also set to readonly. Is this what you mean?

[robdmoore]

Spot on :)

[adamdbradley]

I see the use case, but it might be too specific to put into the core. It wouldn't be much code, but at the same time not many people would need to use it. We're planning on making it easier to have contrib files that extend ionic, so something like this would be a good candidate for that, thanks.

[robdmoore]

No worries - are you able to point me in the right direction for how to create one of these contrib files?

[adamdbradley]

Sorry, not at the moment, but stay tuned as Ionic grows. Thanks

[robdmoore]

Sure thing - is there a github issue I can subscribe to or should I just keep an eye on the changelog / release notes?

[adamdbradley]

These should keep you up to date: https://github.com/driftyco/ionic#community

[robdmoore]

Awesome! Thanks mate - great work on the framework; it's been amazing using it so far :)

[cablehead]

I'm building a chat app, and would like to make the text from chat items selectable, e.g. to copy a address or phone number someone messages to you. It'd be great to have this ability.

Is it possible to at least describe how achieve this, without core support, since 'It wouldn't be much code'?

Thanks.

[rcorrie]

It would have been helpful to post the solution you came up with....

[malixsys]

@robdmoore, @cablehead @rcorrie :
Kludgy, but I use something like this for desktop:

 .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 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;
              }
              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...

[zchking]

Does this discussion has a final conclusion? I think most of us need this function, is there any way to get the ability back to select and copy the text which belong to web browser.

[dhcar]

+1 I'm in the same boat as @zchking

[malixsys]

I think you are left with contentEditable until @adamdbradley and friends give us a way to patch it...

[johnrobertcobbold]

+1 also needing this

[dhcar]

For those that have just entered or may be searching this plugin http://ngcordova.com/docs/plugins/clipboard/ is helpful if you want to implement similar functionality via a button

[Sidd27]

We Just need the text to be selectable not editable that's why we can't use contenteditable property of HTML and in normally we can copy any content but in ionic i think you guys have made it that none of text is selectable. Please provide solution other the below which doesn't require ionic.js changing
https://forum.ionicframework.com/t/how-to-make-text-selectable/4384

[dleric]

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.

Check the whole code here:
https://forum.ionicframework.com/t/how-to-make-text-selectable/4384/25

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.