html - 在 textarea 中按 PageUp 会将网站移出窗口

Question

发生的情况是，当我的光标在 a 中<textarea>并且我输入了几行（也就是按 Enter 几次）并按 PageUp 时，整个网站会移动，以便我的光标位于页面的最左上角，而还在<textarea>。页面内容向左移动，但没有出现水平滚动条，因此再次使用页面的唯一方法是刷新它。

overflow: hidden由于使用了许多带有边距的包装器以及阻止滚动条出现的包装器，这似乎正在发生，但这些对于设置页面样式是必要的。

我能做些什么来阻止这种情况发生，同时又不搞砸整个布局？（大约 4000 行 css ......必须凑合我所拥有的）

示例： http: //jsfiddle.net/ARQ35/（有趣的副作用：即使 jsfiddle 在重现此问题时也会偏离其位置）（仅在 Chrome 和 Opera 中）

HTML：

<div id="ultrawrap">
    <div class="wrap1">
        <div class="wrap2">
            <div class="wrap3">
                <section id="content" class="content">
                     <h1>Fiddle of situation</h1>

                     <h3>Press enter a few times and push PageUp.</h3>

                    <form id="form" method="post">
                        <table style="width: 100%;">
                            <tbody>
                                <tr>
                                    <td>
                                        <textarea cols="85" id="id" name="name" rows="6" style="width: 90%">in here</textarea>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                    <div>
                        <br />
                        <br />
                        <br />space filler so that there's a scrollbar
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler</div>
                </section>
            </div>
        </div>
    </div>
</div>

CSS：

#ultrawrap {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.wrap1 {
    width: 500px;
    position: relative;
    float: left;
    left: 50%;
    background: url() repeat-x 50% 0;
}
.wrap2 {
    width: 500px;
    position: relative;
    float: left;
    left: -50%;
    background: url() repeat-x 50% 259px;
}
.wrap3:after {
    content:'';
    display: block;
    clear: both;
}
.wrap3 {
    background: url() repeat-y 50% 0;
    width: 480px;
    margin: 0 auto;
}

Answer 1

这是一个 VanillaJS 解决方法（也可在GitHub上找到）：

document.querySelector('textarea').addEventListener('keydown', event => {
  if (event.key === 'PageUp' || event.key === 'PageDown') {
    const cursorPosition = event.key === 'PageUp' ? 0 : event.target.textLength;

    event.preventDefault();
    event.target.setSelectionRange(cursorPosition, cursorPosition);
  }
});

它的灵感来自这篇文章： http: //www.competa.com/blog/chrome-bug-pageup-pagedown-textarea-moves-website-window/

另请参阅我创建的原始问题：https ://bugs.chromium.org/p/chromium/issues/detail?id=890248

Answer 2

此错误正在 Win/Linux 上的 Chrome 中重现。不在 MacOS Chrome 或任何 Mozilla、IE 上复制。所以似乎它是一个 Chrome 错误。

似乎唯一的方法是替换向下/向上功能：

$(document).ready(function(){
$("textarea").keydown(function(event){
    if (event.which == 33) {
        window.scrollTo(0, window.scrollY);
        event.preventDefault();
        event.target.setSelectionRange(0, 0);
        $(this).scrollTop(0);
    }
    if (event.which == 34) {
        window.scrollTo(0, window.scrollY);
        event.preventDefault();
        textareaLength = $(this).val().length;
        event.target.setSelectionRange(textareaLength,textareaLength);
        $(this).scrollTop(9999);
    }
}); });

http://jsfiddle.net/ARQ35/6/