| <!DOCTYPE html> |
| <head> |
| </head> |
| <body> |
| <div>When the caret reaches the edge of the input box or content editable div, on the next input it must stay at the edge of the control.</div> |
| <span style="position:absolute; visibility:hidden" id="single-digit">0</span> |
| <div style="border:thin solid black; white-space:nowrap; overflow:hidden" contenteditable="true" id="input-contenteditable">012345678901234567890123456789</div> |
| <script> |
| |
| var contentEditable = document.getElementById("input-contenteditable"); |
| var singleDigitWidth = document.getElementById("single-digit").clientWidth; |
| var contentEditableSize = 10; |
| contentEditable.style.width = (singleDigitWidth * contentEditableSize) + "px"; |
| contentEditable.focus(); |
| // Move the caret to the beginning of the input. |
| getSelection().collapse(contentEditable.firstChild, 0); |
| var editableContent = contentEditable.textContent; |
| if (window.eventSender) { |
| for (var i = 0; i < contentEditableSize * 1.2; ++i) |
| eventSender.keyDown(editableContent[i]); |
| } |
| |
| </script> |
| </body> |
