I have some legacy html that needs to work on old and new browsers (down to IE7) as well as the iPad. The iPad is the biggest issues because of how text selection is handled. On a page there is a textarea as well as some text instructions. The instructions are in a <div> and the user needs to be able to select the instructions.
The problem is that once focus is placed in the textarea, the user cannot subsequently select the text instructions in the <div>. This is because the text cannot receive focus.
According to the Safari Web Content Guide:
Handling Events (especially, "Making Elements Clickable"), you can add a onclick
event handler to the div you want to receive focus.
This solution works (although it is not ideal) in iOS 6x but it does not work in iOS 5x.
Does anyone have a suggestion that minimizes changes to our existing code and produces consistant user interaction.
Here is sample code that shows the problem.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<!--
Resources:
Safari Web Content Guide:
Handling Events (especially, "Making Elements Clickable")
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1
-->
</head>
<body>
<div style="width:550">
<div onclick='function() { void(0); }'>
<p>On the iPad, I want to be able to select this text after the textarea has had focus.</p>
</div>
<textarea rows="20" cols="80">After focus is in the textarea, can you select the text above?</textarea>
</div>
</body>
</html>
