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>
