CODEWITHSUNDEEP
htmliostextareacopy-pastereadonly
Seb Nilsson
Seb Nilsson

Reputation: 26408

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

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/

Upvotes: 6

Views: 5754

Answers (3)

JohnC
JohnC

Reputation: 1387

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/

Upvotes: 6

rpg_digital
rpg_digital

Reputation: 1

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.

Upvotes: 0

David DUTOUR
David DUTOUR

Reputation: 151

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

Upvotes: 0

Related Questions