如何让输入框聚焦时居中显示？现有jQuery代码失效求助

问题原因 #

你找到的代码是给输入框绑定focus事件的回调函数，只有当输入框通过用户交互（比如点击、Tab切换）触发focus时才会执行。但你的场景是在校验错误时主动调用focus()，如果绑定逻辑的时机不对（比如在调用focus()之后才绑定），或者没有触发事件的交互，这段回调就不会执行，自然看不到效果。

正确实现方式 #

直接在校验错误时主动执行「聚焦+滚动居中」的逻辑，不需要绑定事件。代码如下：

// 定位目标输入框
const $targetInput = $("#myElementID");

// 先让输入框获取焦点
$targetInput.focus();

// 计算屏幕垂直中心位置
const windowHalfHeight = $(window).height() / 2;
// 获取输入框相对于文档顶部的偏移量
const inputOffsetTop = $targetInput.offset().top;
// 计算滚动目标位置：让输入框垂直居中（加上自身高度的一半，避免顶部对齐中心）
const scrollToPos = inputOffsetTop - windowHalfHeight + ($targetInput.outerHeight() / 2);

// 执行平滑滚动动画
$('html, body').animate({ scrollTop: scrollToPos }, 'fast');

额外说明 #

• 如果输入框本身在屏幕可见范围内且已经居中，这段代码不会触发滚动，避免不必要的动画。
• 确保代码在DOM加载完成后执行（比如放在$(document).ready()回调中，或者将脚本放在页面底部），避免找不到目标元素。

内容的提问来源于stack exchange，提问作者eligolf