如何防止文本区域滚动到焦点上的光标?

问题描述 投票:0回答:1

问题:
当文本框通过 Javascript 获得焦点时,有没有办法告诉浏览器不要滚动到当前光标位置?


目标:
我想滚动文本区域,并使用按钮在其文本周围导航。但是单击按钮会导致文本区域失去焦点。所以我有一个事件侦听器来侦听“模糊”并应用“焦点”。

示例:-
情况:我正在看文本的顶部,但光标在中间。文本区域获得焦点。我单击滚动到底部按钮来执行此操作

txtarea.scrollTo({top: txtarea.scrollHeight, behavior: "smooth"});

结果:文本区域失去焦点。事件侦听器触发并重新聚焦文本区域。文本区域滚动(即时跳转)以显示光标。然后执行

scrollTo
,文本区域平滑滚动到文本底部。


最小工作示例(Chromium 和 Firefox):

<!DOCTYPE html> 
<html>
   <head>
   </head>
   <body>
      <textarea rows="20" cols="30" id="textbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac tellus a tortor aliquam placerat in tincidunt neque. Fusce a sapien lacus. Aliquam suscipit condimentum tempor. Vestibulum dignissim turpis in ipsum rhoncus, sed porttitor urna suscipit. Phasellus varius diam at elit eleifend dignissim. Donec id condimentum tellus, vitae elementum ex. Fusce scelerisque, nisl vel condimentum hendrerit, nulla magna dictum lacus, ac euismod metus ipsum at felis. Curabitur rutrum molestie accumsan. Cras vitae lobortis metus.
Curabitur gravida, erat ut congue ullamcorper, metus nibh auctor ex, a ultricies libero elit quis risus. In gravida ipsum a mi interdum egestas. Nam eu ante molestie, semper mi vitae, hendrerit ligula. Duis ac semper orci. Vestibulum sapien nunc, eleifend id gravida a, aliquet quis erat. Vestibulum porttitor vel neque sed vehicula. Aliquam dignissim lorem tortor, eget rhoncus tortor rutrum nec. Nunc aliquam nisi sed mauris condimentum lacinia. Suspendisse tristique luctus vulputate. Integer efficitur, sem in iaculis porttitor, risus arcu consequat tellus, quis ultrices eros libero vitae elit. Aenean diam ipsum, fringilla sed arcu sed, blandit posuere justo. Maecenas porttitor est quis commodo sollicitudin.
Sed justo nibh, gravida id velit dignissim, aliquet viverra lacus. In non ligula luctus, malesuada justo quis, placerat velit. Nullam justo massa, blandit a sapien nec, pellentesque gravida nisl. Sed pellentesque sit amet nunc molestie egestas. Nullam ultrices orci non sagittis maximus. Vestibulum cursus vel velit malesuada mollis. Sed dapibus, massa quis suscipit dictum, ligula metus vehicula est, vel tincidunt magna quam ut orci. Aenean aliquet rutrum metus et finibus.
      </textarea>
      <script>
         const txtarea = document.getElementById("textbox");
         setTimeout(() => {
            txtarea.focus();
         }, 8000);
      </script>
   </body>
</html>

加载页面,将文本区域向下滚动大约一半,在文本中单击,滚动回顶部,在文本区域外单击。

几秒钟后,文本框将获得焦点并立即滚动以使光标位置可见。


javascript scroll focus textarea
1个回答
0
投票

如果使用以下内容,可以防止自动滚动到焦点元素:

let element = document.getElementById('someElementId');
element.focus({ preventScroll: true });
© www.soinside.com 2019 - 2024. All rights reserved.