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

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/

Answer 2

I've successfull select some text on my iPhone, but needs many try.
<textarea readonly onfocus="this.blur();">Totally readonly, CAN BE copied</textarea>
and the last : http://jsfiddle.net/jfvWZ/6/
<div>
<label>Plain div</label><br />
<div id="plain-div" onFocus="this.blur();">
Plain div
</div>
</div>
Easy to select the text on iPhone

Answer 3

Likewise ran into this issue.
Not sure if the following is a decent, correct or semantic alternative, but it worked for me.
I simply changed the textarea to a div readonly, same styles applied.
The one drawback is that in JavaScript I couldn't target the div with this['myForm']. It doesn't appear to be a child of the form element in DOM.
Instead I had to get the element by id and set it's innerHTML, rather than set the value as with textarea.
It worked on Ipad 1 IOS5 and Iphone 4s IOS7 I am now able to select and copy text to clipboard.