Is there a way to prevent a contentEditable element from scrolling when the cursor reaches the bottom?

Question

For example, I have a contentEditable div and I can type in it. When the text reaches the bottom of the div, the browser automatically scrolls the div so that the end of the text and the cursor are still visible.

How do I prevent the div from scrolling so that the inputted text goes past the bottom of the div and so that you can no longer see the cursor while you type?

The behavior I'm trying to achieve is like in Photoshop: when you make a text box, and type too much, the cursor continues past the bottom of the box and you can't see what you are typing. If you expand the box, you'll see all the hidden text.

EDIT 2/7/2012 9:27am: This is what I have right now, but it looks glitchy because the scroll position is adjusted AFTER the keyup event: http://jsfiddle.net/trusktr/hgkak/6/ So before the keyup event, the cursor gets temporarily placed into view (for each keystroke). I'd like there to be no jumping, and for the cursor to remain below the end of the green div when there is excess text without the view jumping around (the jumping seems like an amateur hack on my part :D)

Answer 1

Let's try a hack:

• first we try to prevent or revert any scrolling
• whenever the user presses a key we turn the element's overflow property to visible to avoid scrolling of the content, but hide the element at the same time by setting its opacity to 0. Immediately afterwards we switch overflow back to hidden and show the element again.
• to avoid flickering we create a clone of the editable element (with overflow: hidden) and show this element while the original one is hidden.

Here we go (uses jQuery for DOM convenience):

$(function() {

    var editableElement = $('#editable'), clonedElement;

    // Revert any scrolling                    
    editableElement.on("scroll", function(event) {
        editableElement.scrollTop(0);

        // Try to prevent scrolling completely (doesn't seem to work)
        event.preventDefault();
        return false;
    });

    // Switch overflow visibility on and off again on each keystroke.
    // To avoid flickering, a cloned element is positioned below the input area
    // and switched on while we hide the overflowing element.
    editableElement.on("keydown", function() {

        // Create a cloned input element below the original one
        if (!clonedElement) {
            var zIndex = editableElement.css('zIndex');
            if (isNaN(parseInt(zIndex, 10))) {
                zIndex = 10;
                editableElement.css({zIndex: zIndex});
            }    

            clonedElement = editableElement.clone();
            clonedElement.css({
                zIndex: zIndex-1,
                position: 'absolute',
                top: editableElement.offset().top,
                left: editableElement.offset().left,
                overflow: 'hidden',
                // Set pseudo focus highlighting for webkit
                // (needs to be adapted for other browsers)
                outline: 'auto 5px -webkit-focus-ring-color'
            });
            editableElement.before(clonedElement);
        } else {
            // Update contents of the cloned element from the original one
            clonedElement.html(editableElement.html());
        }

        // Here comes the hack:
        //   - set overflow visible but hide element via opactity.
        //   - show cloned element in the meantime
        clonedElement.css({opacity: 1});
        editableElement.css({overflow: 'visible', opacity: 0});

        // Immediately turn of overflow and show element again.
        setTimeout(function() {
            editableElement.css({overflow: 'hidden', opacity: 1});
            clonedElement.css({opacity: 0});
        }, 10);

    });
});

Check this jsFiddle to play with the above code.

Note that this may not be a complete solution (I have only tried it with Safari, Chrome and Firefox yet), but for the tested browsers it seems to work. You may want to fine-tune and polish your implementation (e.g. focus highlighting). In the jsFiddle example I have also turned off spell checking to avoid flickering markings.