I’ve started a little project for myself to get more familiar and comfortable with jQuery. This is part of a script I’m writing for a virtual keyboard. It works great for detecting key events and key event combinations, and prepending the corresponding character to a blinking cursor. The problem I’m experiencing now is that when I type enough characters to fill the width of the window, the cursor is knocked down a line, while the typed letters continue on the same line, activating the horizontal scroll bar. Why is this happening? Can it be fixed w/ jQuery alone? Trying to keep CSS hacks to a minimum since this is an exercise to learn more jQuery. Thanks!
jQuery:
$(document).keydown(function(e) {
if (e.keyCode == 65) {
if (e.keyCode == 65 && e.shiftKey) {
$('#cursor').prepend('<span>A</span>');
}
else {
$('#cursor').prepend('<span>a</span>');
}
}
Html :
<body>
<div class="textarea">
<!-- where characters prepend -->
<span id="cursor"></span>
</div>
</body>
It’s a CSS issue, but it’s an easy fix. Just add this to your CSS:
That instructs CSS to break words in order to make the line wrap. If you type aaaaaaaaaaaaa (on and on), it’ll consider that one word, and not break it unless you give the above instructions.