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

copy-paste, html, ios, readonly, textarea

Solution

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/

Problem

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/

Original source