HTML: How to make a readonly textarea copyable in iOS-devices

Question

How do I make a textarea and input type="text" highlightable and copyable on iOS-devices?

This does not work:

<textarea readonly="readonly">Totally readonly, cannot be copied</textarea>

Neither does:

<textarea disabled="disabled">Totally readonly, cannot be copied</textarea>

EDIT: The text-area is constantly being updated, so a one-off transformation of it won't work.

The content of the textarea can also be HTML.

I have a JSFiddle that I tested this on: http://jsfiddle.net/sebnilsson/jfvWZ/

Answer 1

One solution could be to find all the readonly textareas on the page and render a div with the contents in place of the read only field. I have written some very simple JS to demonstrate this.

Something along the lines of

$('textarea[readonly]').removeAttr('readonly').each(function () {
    var $this = $(this);
    $this.hide().after('<div data-textarea="' + $this.attr('id')
        + '" class="textarea">' + $this.val() + '</div>');
}).on('textareachange', function () {
    var $this = $(this);
    $('[data-textarea="' + $this.attr('id') + '"]').html($this.val());
});

You will also need to trigger the event when you update the textarea value. For example

$('textarea').val('test').trigger('textareachange'); 

There's a more extensive example here with examples on the styling etc.

http://jsfiddle.net/ssfUx/3/