CompositionEvent.html (2441B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title id='desc'> Composition Event Types: compositionstart, compositionupdate, compositionend </title> 5 <script type="text/javascript"> 6 var PassTest = function() 7 { 8 document.getElementById("testresult").firstChild.data = "PASS"; 9 } 10 11 var FailTest = function() 12 { 13 document.getElementById("testresult").firstChild.data = "FAIL"; 14 } 15 16 var TARGET; 17 var ExpectResult = ["compositionstart", "compositionupdate", "compositionend"]; 18 var ActualResult = []; 19 var count = 0 20 21 window.onload = function(e) 22 { 23 try 24 { 25 TARGET = document.getElementById("target"); 26 TARGET.addEventListener("compositionstart", TestEvent, true); 27 TARGET.addEventListener("compositionupdate", TestEvent, true); 28 TARGET.addEventListener("compositionend", TestEvent, true); 29 } 30 catch(ex) 31 { 32 FailTest(); 33 } 34 } 35 36 function TestEvent(evt) 37 { 38 ActualResult.push(evt.type); 39 TARGET.removeEventListener(evt.type, TestEvent, true); 40 41 if (ExpectResult.toString() == ActualResult.toString()) 42 { 43 PassTest(); 44 } 45 } 46 </script> 47 </head> 48 <body> 49 <h3>DOM Events</h3> 50 <h4> 51 Test Description: The composition events occur in a set order relative to one another: 52 1. compositionstart, 2. compositionupdate (multiple events), 3. compositionend. 53 </h4> 54 55 <pre> 56 <input id="target" value=""/> 57 58 Steps: 59 1) Open Japanese Microsoft IME and select Hiragana input method 60 2) Click at the above textbox and then type 'a' using keyboard 61 3) Press the '{Enter}' key to complete the IME composition 62 4) <a href="CompositionEvent.html">Click here</a> to test again if not following the steps exactly 63 </pre> 64 65 <p>Test passes if the word "PASS" appears below and nothing is typed to the textbox after following the above steps.</p> 66 <div>Test result: </div> 67 <div id='testresult'>FAIL</div> 68 </body> 69 </html>