| <style> |
| table { font: 11px 'Lucida Grande' } |
| .result { color: GrayText; padding-left: 4px; padding-right: 8px } |
| .result:before { content: "expected: " } |
| </style> |
| |
| <table> |
| |
| <tr><td><input type="text" id="f" size="5" maxlength="4"></td> |
| <td class="result">123</td> |
| <td class="description">set value attribute that violates maxlength (with pasted value)</td></tr> |
| |
| <tr><td><input type="text" id="e" size="5" maxlength="4"></td> |
| <td class="result">1234</td> |
| <td class="description">set value property that violates maxlength (with pasted value)</td></tr> |
| |
| <tr><td><input type="text" id="d" size="5"></td> |
| <td class="result">1234</td> |
| <td class="description">set maxlength attribute that is smaller than pasted value</td></tr> |
| |
| <tr><td><input type="text" id="c" size="5"></td> |
| <td class="result">1234</td> |
| <td class="description">set maxLength property that is smaller than pasted value</td></tr> |
| |
| <tr><td><input type="text" id="j" size="5" maxlength="4"></td> |
| <td class="result">123</td> |
| <td class="description">set value attribute that violates maxlength (with pasted value)</td></tr> |
| |
| <tr><td><input type="text" id="i" size="5" maxlength="4"></td> |
| <td class="result">12x̲̅4</td> |
| <td class="description">set value property that violates maxlength (with pasted value)</td></tr> |
| |
| <tr><td><input type="text" id="h" size="5"></td> |
| <td class="result">12x̲̅4</td> |
| <td class="description">set maxlength attribute that is smaller than pasted value</td></tr> |
| |
| <tr><td><input type="text" id="g" size="5"></td> |
| <td class="result">12x̲̅4</td> |
| <td class="description">set maxLength property that is smaller than pasted value</td></tr> |
| |
| <tr><td><input type="text" id="k" size="5" maxlength="4"></td> |
| <td class="result">12x̲̅4</td> |
| <td class="description">pasting too much text</td></tr> |
| |
| </table> |
| |
| <script> |
| var fancyX = "x" + String.fromCharCode(0x305) + String.fromCharCode(0x332); |
| document.getElementById("c").focus(); |
| document.execCommand("InsertHTML", false, "12345"); |
| document.getElementById("c").maxLength = 4; |
| document.getElementById("d").focus(); |
| document.execCommand("InsertHTML", false, "12345"); |
| document.getElementById("d").setAttribute('maxlength', 4); |
| document.getElementById("e").focus(); |
| document.execCommand("InsertHTML", false, "123"); |
| document.getElementById("e").value = '12345'; |
| document.getElementById("f").focus(); |
| document.execCommand("InsertHTML", false, "123"); |
| document.getElementById("f").setAttribute('value', '12345'); |
| document.getElementById("g").focus(); |
| document.execCommand("InsertHTML", false, "12x̲̅45"); |
| document.getElementById("g").maxLength = 4; |
| document.getElementById("h").focus(); |
| document.execCommand("InsertHTML", false, "12x̲̅45"); |
| document.getElementById("h").setAttribute('maxlength', 4); |
| document.getElementById("i").focus(); |
| document.execCommand("InsertHTML", false, "123"); |
| document.getElementById("i").value = '12' + fancyX + '45'; |
| document.getElementById("j").focus(); |
| document.execCommand("InsertHTML", false, "123"); |
| document.getElementById("j").setAttribute('value', '12' + fancyX + '45'); |
| document.getElementById("k").focus(); |
| document.execCommand("InsertHTML", false, "12x̲̅45"); |
| document.getElementById("k").blur(); |
| </script> |