在文本字段中输入时，有没有办法触发浏览器默认的“滚动到光标”行为？

Posted 2023-05-07

【中文标题】在文本字段中输入时，有没有办法触发浏览器默认的“滚动到光标”行为？

【英文标题】：Is there a way to trigger the browsers default "scroll to cursor" behaviour when when typing in a textfield?

【发布时间】：2017-11-08 10:35:59

【问题描述】：

我想触发浏览器的默认行为，当有人开始写并且光标在屏幕上时跳转到光标。

目前，如果我调整光标的大小不在屏幕上，我想在调整大小后再次将滚动条居中光标。

当我调整大小并键入时，滚动条会自动跳到正确的位置。有没有办法使用 vanilla javascript 或 jQuery 触发“跳转到光标”行为？

【参考方案1】：

嗯，试试这样的：

$('.element').keydown(function (event) 
    event.preventDefault();
    $(this).focus();   
);

【讨论】：

问题是，这会触发 keydown，但我想模拟 keydown“滚动到插入符号”的行为。不过谢谢！ :)

基本上是的，在 Element 调整大小时，滚动条应该跳转到 contenteditable 中的光标位置 :)

如果我做对了，你想使用： $('item').keydown();或 $('item').focus() 在 $(window).resize() 事件???

是的，我想触发浏览器“键入时跳转到活动光标”行为:)

【参考方案2】：

您可以使用 document.activeElement 选择焦点元素和 scrollIntoView() ：

$(window).resize(function()
  element = document.activeElement;
  element.scrollIntoView(true);
);

div
  height:200vh;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<input type="text" />

【讨论】：

遗憾的是不能滚动到当前光标位置。不过谢谢你:)

我用一个有效的 sn-p 编辑了我的答案。将输入集中在 sn-p 的最底部并返回页面。 5 秒后，它将聚焦输入。您现在要做的就是编辑代码何时触发。

在 Chrome 中，这会将代码 sn-p 移动到页面顶部，我的意思是，编辑器在屏幕上并且有溢出，在调整编辑器大小时，编辑器的滚动条会滚动光标离开屏幕。当我键入时，它会捕捉到光标。这就是我想要模拟的:)

你有你的情况的例子吗？我不太明白你的意思。

我有一个内容可编辑的编辑器，例如50 像素宽，固定最大高度为 100 像素。现在，如果有溢出，将显示一个滚动条，以便您滚动文本。当我写的时候，浏览器会自动跳转到光标位置，这样用户就可以看到他/她在写什么。如果我将编辑器宽度调整为例如100px，内容现在移动并以新大小重排，但光标现在位于不可见区域。当我键入时，浏览器会再次跳转到它，但我想将光标滚动到我的调整大小功能中的可见区域。 :)