Question

我有一个扩展的textarea。当textarea已经扩展到足以到达窗口的底部时，身体会闪烁/滚动回到textarea的顶部，除非你滚动窗口，否则你无法看到你键入的最后一个字符。

可以在此jsfiddle中找到该示例。我尝试在身体上添加一个scrollTo

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

如何从窗口计算光标在textarea中的偏移量？我想要获得光标的顶部偏移，如果光标已经超出折叠范围，只需将窗口滚动到其位置。

非常感谢此方面的帮助：）

Answer 1

我对所有鼠标位置问题使用以下内容并且从未出现过问题。我不明白为什么它对这个实例也不起作用。

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

你可以像我一样使用它：

window.scrollTo(0, cX);

或者只是将e.pageX放入您的代码示例中。 cX，cY是光标坐标。

Answer 2

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

Answer 3

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

我在resize函数中添加了代码片段。

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

键入autoresizing textarea继续聚焦在元素的顶部

3 个答案: