How to enable user select in a readOnly html element on iPad safari?

Question

I have an HTML element in my web page on iPad and it must be read only to prevent users updating the content,using readOnly='readOnly' makes the element unselectable and text content of the element can not be copied at all.

is there any way to make the element read only and the user can select/copy the text content????

I voted to reopen this question. This question is very different than the linked duplicate question. — Brian, Jun 20 '13 at 23:54
Agreed. This issue is specific to iPad text input fields and the readOnly attribute and the answer below from aomar is the only solution I've encountered. — peater, Jun 13 '14 at 14:53

score 12 · Accepted Answer · edited Jul 12 '13 at 21:27

12

just i removed the readOnly attribute and added the following onkeydown and oncut events to simulate readOnly behavior

<input type="textarea" 
    onkeydown="event.preventDefault();event.stopPropagation();return false;" 
    oncut="event.preventDefault();event.stopPropagation();return false;">

edited Jul 12 '13 at 21:27

Sander Rijken

21,376
3
61
85

answered Oct 07 '12 at 08:10

aomar

500
1
6
23

5

Careful! This breaks the text field's keyboard shortcuts (e.g. CMD + C or CMD + A) in most browsers. – aaronk6 Jul 04 '14 at 13:48
1

it's for iPad not for anything else – aomar Jul 07 '14 at 08:51
1

iPad users may use an external keyboard, which is very common on ipad Pro. Keyboard shortcuts will be broken for them as well. – LeJared Jul 21 '16 at 20:09

How to enable user select in a readOnly html element on iPad safari?

1 Answers1

Linked