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>
