有没有办法防止contentEditable元素在光标到达底部时滚动？

Question

例如,我有一个contentEditable div,我可以输入它.当文本到达div的底部时,浏览器会自动滚动div,以便文本末尾和光标仍然可见.

如何防止div滚动以使输入的文本超过div的底部,以便在键入时无法再看到光标？

我试图实现的行为就像在Photoshop中一样:当你创建一个文本框并输入太多时,光标会继续通过框的底部,你无法看到你正在键入的内容.如果展开框,您将看到所有隐藏文本.

编辑2012年2月7日上午9:27:这就是我现在所拥有的,但它看起来很奇怪,因为在键盘事件后调整滚动位置:http://jsfiddle.net/trusktr/hgkak/6/所以在此之前keyup事件,光标暂时放入视图中(对于每次击键).我希望没有跳跃,并且当没有视图跳跃时,光标保持在绿色div的末尾以下(跳跃看起来像我的业余黑客:D)

Answer 1

我们来试试吧:

• 首先,我们尝试阻止或恢复任何滚动
• 每当用户按下一个键时,我们转动元素的overflow属性以visible避免滚动内容,但是通过将其设置opacity为0来同时隐藏元素.之后我们立即切换overflow回hidden并再次显示元素.
• 为了避免闪烁,我们创建了一个可编辑元素的克隆(with overflow: hidden),并在隐藏原始元素时显示该元素.

在这里我们(使用jQuery为DOM方便):

$(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);

    });
});

检查此jsFiddle以使用上面的代码.

请注意,这可能不是一个完整的解决方案(我只尝试过Safari,Chrome和Firefox),但对于经过测试的浏览器,它似乎可行.您可能希望对您的实现进行微调和优化(例如,焦点突出显示).在jsFiddle示例中,我还关闭了拼写检查以避免闪烁标记.