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>
