Bug Tracker

Ticket #5055: iebug.html

File iebug.html, 1.9 KB (added by william_mc, 12 years ago)
Line 
1<head>
2<script src="jquery-1.3.1.js"></script>
3<script>
4/*
5This script demos a problem in IE when a button, when clicked,
6is replaced with an input field. IE ignores calls to set focus to it.
7
8This is shown for the first button.
9
10There is a workaround for it, which involves setting a timeout on the focus
11request. This works when the button is clicked, as shown on the second button.
12
13However it does not work when the button 'clicks' because it (a) has focus and
14(b) the user hits <return>. In this case, you need to do two more things. First
15you have to move focus to some other button, and second, the body needs to have
16a handler for keypress events that refocuses the input field.
17
18Workarounds are unnecessary in FF and Chrome.
19*/
20
21function putinput1() {
22  $('#replace1').html('Focus gone: <input type="text" width=20 id="typeme1" name="typeme"/>');
23  $('#typeme1').focus();
24}
25
26function putinput2() {
27  $('#replace2').html('Focus here: <input type="text" width=20 id="typeme2" name="typeme"/>');
28  setTimeout(function() {$('#typeme2').focus()}, 0)
29}
30
31function putinput3() {
32  $('#replace3').html('Focus here: <input type="text" width=20 id="typeme3" name="typeme"/>');
33  setTimeout(function() {
34       $('#change1').focus(); 
35       $('#typeme3').focus()
36  }, 0)
37}
38
39$(document).ready( function() {
40    $('#change1').click( putinput1 );
41    $('#change2').click( putinput2 );
42    $('#change3').click( putinput3 ).focus();
43    $('body').keypress(function() { 
44    // needed for third button to work
45        setTimeout( function() {$('#typeme3').focus()},0); 
46     }
47  )
48  } 
49);
50
51</script>
52<body>
53<div id='replace1'>
54<button id="change1" >replace me with an input field, but focus lost</button>
55</div>
56<div id='replace2'>
57<button id="change2">replace me with an input field, but focus works</button>
58</div>
59<div id='replace3'>
60<button id="change3">On load, this has focus</button>
61</div>
62</body>