在 autoresizing textarea 中键入会一直聚焦在元素的顶部答案

【问题标题】：Typing in autoresizing textarea keeps on focusing at the top of the element在 autoresizing textarea 中键入会一直聚焦在元素的顶部
【发布时间】：2014-03-30 12:51:54
【问题描述】：

我有一个扩展的文本区域。当 textarea 已经扩展到足以到达窗口底部时，正文会闪烁/滚动回 textarea 的顶部，除非滚动窗口，否则您将看不到最后键入的字符。

可以在jsfiddle 中找到示例。我尝试在正文中添加一个 scrollTo

window.scrollTo(0, document.getElementsByTagName('textarea')[0].getBoundingClientRect().bottom);

如何计算 textarea 中光标相对于窗口的偏移量？我正在考虑获取光标的顶部偏移量，如果光标已经超出折叠位置，则只需将窗口滚动到其位置。

非常感谢您的帮助:)

【问题讨论】：

我认为它正在做闪烁的事情，因为我替换了 textarea 的值
我注意到的另一件事是，当我按下退格键时，它可以正确聚焦
哦，我认为这是因为退格按钮不会触发按键事件，而按键事件又不会调用文本区域的调整大小功能。如何复制该效果以避免在输入字符时出现闪烁？
你为什么要设置插入符号的位置？你为什么不只是设置高度？想知道我错过了什么......
您尝试的 scrollTo 有什么问题？它似乎适用于 Firefox 和 Chrome

标签： javascript jquery textarea autoresize cursor-position

【解决方案1】：

您的代码很棒 - 我刚刚添加了几毫秒的超时时间（大约 100-200 就足够了），现在它表现得很好。只是想知道 on('focus') 事件处理程序是做什么用的。并且猜你可以跳过在 resize() 函数中调用 focus()...

【讨论】：

但是当您在文本区域的中间部分输入时，它会聚焦在文本区域的末尾
嗯，我明白了问题所在。猜猜你必须计算文本区域中 carret 的大致位置并以此调整滚动...

【解决方案2】：

我在堆栈中找到了解决方案！ https://stackoverflow.com/a/18262927/769326

我还在 resize 函数中添加了代码 sn-p。

function resize(e){
var text = _this.value,
    lines = text.split('\n'),
    cursorPosition = $this.getCursorPosition(),
    scrollLeft = window.pageXOffset || (document.documentElement || document.body.parentNode || document.body).scrollLeft,
    scrollTop  = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;

    for(var i = 0, length = lines.length; i < length; i++){
        if(lines[i].length <= settings.charactersPerLine){
            continue;
        }

        var j = 0,
            space = settings.charactersPerLine;

        while(j++ <= settings.charactersPerLine){
            if(lines[i].charAt(j) === ' '){
                space = j;
            }
        }

        lines[i+1] = lines[i].substr(space) + (lines[i + 1] || '');
        lines[i] = lines[i].substr(0, space);
    }

    _this.value = lines.join('\n');

    if(cursorPosition == text.length){
        setCaretToPos(_this, cursorPosition + 1);
    }
    else{
        setCaretToPos(_this, cursorPosition);
    }

    _this.style.height = elementHeight;
    _this.style.height = _this.scrollHeight + 'px';
    _this.style.overflow = 'hidden';

    window.scrollTo(scrollLeft, scrollTop);
}

这是jsfiddle

【讨论】：

【解决方案3】：

我使用以下所有鼠标位置问题并且从未遇到过问题。我不明白为什么它也不适用于这个实例。

var cX;
var cY;
document.onmousemove = function(e){
    cX = e.pageX;
    cY = e.pageY;
}

你可以像我一样使用它：

window.scrollTo(0, cX);

或者简单地将 e.pageX 放入您的代码示例中。 cX, cY 是光标坐标。

【讨论】：

抱歉，插入符号/文本区域光标不是鼠标光标