有一种方法可以防止在光标到达底部时滚动contentEditable元素吗？ [英] Is there a way to prevent a contentEditable element from scrolling when the cursor reaches the bottom?

问题描述

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

如何防止div滚动，以便输入的文本越过div的底部，这样你就不会再看到光标，而你键入？

我试图行为实现就像在Photoshop中：当你制作一个文本框，并输入太多时，光标会继续在盒子的底部，并且看不到你正在输入的内容。如果您展开该框，您将看到所有隐藏文字。

编辑2/7/2012 9:27 am ：这就是我现在有，但它看起来很糟糕，因为滚动位置是在keyup事件后调整的： http：// jsfiddle.net/trusktr/hgkak/6/ 因此，在keyup事件之前，光标暂时放入视图中（对于每个击键）。我希望在那里没有跳跃，并且当有多余的文本而没有视图跳转时，光标仍然保持在绿色div的末端（跳跃看起来像是我的业余爱好者：D）

解决方案

让我们试试一下：
$ b

当用户按下一个键时，我们尝试阻止或恢复任何滚动

• ，我们将元素的溢出属性转换为 visible 以避免滚动内容，但通过将 opacity 设置为0，同时隐藏该元素。之后立即切换 overflow 回到隐藏并再次显示元素。 为避免闪烁，我们创建一个可编辑元素的克隆（带有 overflow：hidden ），并在隐藏原始元素时显示此元素。

在这里，我们将使用jQuery（为了方便DOM）：

  $（function（）{ 
 
 var editableElement = $（'＃editable'），clonedElement; 
 
 //恢复任何滚动
 editableElement.on（scroll，function（event）{
 editableElement.scrollTop（0）; 
 
 / /尽量防止完全滚动（似乎不起作用）
 event.preventDefault（）; 
 return false; 
}）; 
 
 //在每次击键时，都会打开和关闭溢出可见性。 
 //为避免闪烁，克隆的元素位于输入区域
 //下方，并在隐藏溢出元素时打开。 
 editableElement.on（keydown，function（）{
 
 //在原始元素下面创建一个克隆的输入元素
 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，$ b $ left：editableElement.offset（）。left，
 overflow：'hidden'，
 //设置伪焦点高亮webkit 
 //（需要适应其他浏览器）
概要：'auto 5px -webkit-focus-ring-color'
}）; 
 editableElement.befo重（clonedElement）; 
} else {
 //更新原始元素的克隆元素的内容
 clonedElement.html（editableElement.html（））; 
} 
 
 //这里是黑客：
 //  - 设置溢出可见，但通过opactity隐藏元素。 
 //  - 在此期间显示克隆的元素
 clonedElement.css（{opacity：1}）; 
 editableElement.css（{overflow：'visible'，opacity：0}）; 
 
 //立即再次溢出并显示元素。 
 setTimeout（function（）{
 editableElement.css（{overflow：'hidden'，opacity：1}）; 
 clonedElement.css（{opacity：0}）; 
 }，10）; 
 
}）; 
}）; 
  

检查这个jsFiddle 与上面的代码一起玩。

请注意，这可能不是一个完整的解决方案（我只用Safari试过， Chrome和Firefox），但是对于经过测试的浏览器来说，它似乎有效。您可能需要微调和优化您的实现（例如，突出显示焦点）。在jsFiddle示例中，我还关闭了拼写检查以避免闪烁标记。

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)

解决方案

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.

这篇关于有一种方法可以防止在光标到达底部时滚动contentEditable元素吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！