spellcheck-insertReplacementText-input-event-manual.html (5949B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 HTML5 Text Replacement: insertReplacementText Input Event Test 6 </title> 7 <meta 8 content="text/html; charset=UTF-8" 9 http-equiv="Content-Type" 10 /> 11 <link 12 rel="author" 13 title="Microsoft" 14 href="http://www.microsoft.com/" 15 /> 16 <link 17 rel="help" 18 href="https://w3c.github.io/input-events/#overview" 19 /> 20 <meta 21 name="assert" 22 content="Test insertReplacementText input events and dataTransfer objects" 23 /> 24 <style> 25 .test-element { 26 border: 2px solid blue; 27 width: 200px; 28 height: 60px; 29 margin: 10px; 30 padding: 10px; 31 } 32 .test-container { 33 display: flex; 34 flex-wrap: wrap; 35 gap: 20px; 36 margin: 20px 0; 37 } 38 .result { 39 margin: 5px 0; 40 padding: 5px; 41 border: 1px solid #ccc; 42 font-family: monospace; 43 font-size: 12px; 44 } 45 textarea, 46 input { 47 width: 180px; 48 height: 40px; 49 } 50 .instructions { 51 background-color: #f0f0f0; 52 padding: 10px; 53 margin: 10px 0; 54 } 55 </style> 56 <script type="text/javascript"> 57 function logResult(test, pass, details) { 58 const div = document.getElementById("results"); 59 const resultDiv = document.createElement("div"); 60 resultDiv.className = "result"; 61 resultDiv.style.color = pass ? "green" : "red"; 62 resultDiv.innerHTML = `<strong>${test}:</strong> ${ 63 pass ? "PASS" : "FAIL" 64 } - ${details}`; 65 div.appendChild(resultDiv); 66 } 67 68 function setupReplacementTarget( 69 element, 70 testName, 71 isContentEditable 72 ) { 73 element.addEventListener("input", function (e) { 74 if (e.inputType === "insertReplacementText") { 75 if (isContentEditable) { 76 // For contenteditable div: expect dataTransfer populated, data as null 77 const hasDataTransfer = 78 e.dataTransfer !== null && e.dataTransfer !== undefined; 79 const dataIsNull = e.data === null; 80 81 if (hasDataTransfer && dataIsNull) { 82 logResult( 83 testName, 84 true, 85 `DataTransfer: ${ 86 e.dataTransfer.types 87 ? Array.from(e.dataTransfer.types).join(", ") 88 : "none" 89 }, Data: null (correct)` 90 ); 91 } else { 92 logResult( 93 testName, 94 false, 95 `Expected dataTransfer populated and data null. Got dataTransfer: ${hasDataTransfer}, data: ${e.data}` 96 ); 97 } 98 } else { 99 // For input/textarea: expect dataTransfer null, data as text 100 const dataTransferIsNull = e.dataTransfer === null; 101 const hasData = e.data !== null && e.data !== undefined; 102 103 if (dataTransferIsNull && hasData) { 104 logResult( 105 testName, 106 true, 107 `Data: "${e.data}", DataTransfer: null (correct)` 108 ); 109 } else { 110 logResult( 111 testName, 112 false, 113 `Expected dataTransfer null and data populated. Got dataTransfer: ${e.dataTransfer}, data: ${e.data}` 114 ); 115 } 116 } 117 } 118 }); 119 } 120 121 window.onload = function () { 122 // Make all divs contenteditable 123 document 124 .querySelectorAll("div.test-element") 125 .forEach((el) => (el.contentEditable = true)); 126 127 // Setup input event listeners 128 setupReplacementTarget( 129 document.getElementById("div-target1"), 130 "Spell Check - ContentEditable Div", 131 true 132 ); 133 setupReplacementTarget( 134 document.getElementById("textarea-target1"), 135 "Spell Check - Textarea", 136 false 137 ); 138 setupReplacementTarget( 139 document.getElementById("input-target1"), 140 "Spell Check - Input", 141 false 142 ); 143 }; 144 </script> 145 </head> 146 <body> 147 <h1>insertReplacementText Input Event Test</h1> 148 <p> 149 Test insertReplacementText input events and their dataTransfer 150 objects during text replacement operations. 151 </p> 152 153 <div class="instructions"> 154 <h3>Test Instructions:</h3> 155 <ol> 156 <li> 157 <strong>Spell Check:</strong> Type a misspelled word, 158 right-click and select a correction 159 </li> 160 </ol> 161 </div> 162 163 <div class="test-container"> 164 <!-- Spell Check Tests --> 165 <div> 166 <h4>Spell Check - ContentEditable Div</h4> 167 <div id="div-target1" class="test-element" spellcheck="true"> 168 Type "teh" or "recieve" and right-click for corrections 169 </div> 170 </div> 171 172 <div> 173 <h4>Spell Check - Textarea</h4> 174 <textarea 175 id="textarea-target1" 176 class="test-element" 177 spellcheck="true" 178 placeholder="Type 'teh' or 'recieve' and right-click for corrections" 179 ></textarea> 180 </div> 181 182 <div> 183 <h4>Spell Check - Input</h4> 184 <input 185 id="input-target1" 186 class="test-element" 187 spellcheck="true" 188 placeholder="Type 'teh' or 'recieve' and right-click for corrections" 189 /> 190 </div> 191 </div> 192 193 <div class="instructions"> 194 <h4>How to test:</h4> 195 <ul> 196 <li> 197 <strong>Spell Check:</strong> Type misspelled words like "teh" 198 or "recieve", right-click and select correction 199 </li> 200 </ul> 201 </div> 202 203 <h3>insertReplacementText Results:</h3> 204 <div id="results"> 205 Perform text replacement operations above to see PASS/FAIL 206 results... 207 </div> 208 </body> 209 </html>