slideDown后聚焦input引发高度变化，如何保留聚焦并避免额外滑动？

问题描述：点击按钮后，wrap 容器会切换显示/隐藏，但第一个输入框会改变高度，导致整个 wrap 出现额外的slideDown效果——原因出在 $('#inpname').focus(); 这行代码，移除后一切正常，需要保留聚焦功能同时避免该问题。

你尝试过的无效代码：

$('button').on('click', async function(){
    await $('#wrap').slideToggle();
  $('#inpname').focus();
});

解决方案 #

jQuery的slideToggle方法不返回Promise，所以用await无法等待动画完成。正确做法是利用slideToggle的完成回调函数，在动画彻底结束后再执行聚焦操作，此时容器高度已计算完毕，不会因输入框聚焦的尺寸变化触发额外动画：

$('button').on('click', function(){
    $('#wrap').slideToggle(function() {
        // 动画完成后再聚焦输入框
        $('#inpname').focus();
    });
});

额外优化建议 #

如果输入框聚焦时浏览器默认样式（比如outline、box-shadow）导致尺寸变化，可通过CSS显式定义聚焦状态样式，固定元素尺寸，彻底避免容器重排：

.inpname:focus, .inpcontact:focus {
    outline: none; /* 移除浏览器默认outline */
    box-shadow: 0 0 0 2px #aaa; /* 自定义聚焦样式，不改变元素尺寸 */
    /* 强制保持与非聚焦状态一致的尺寸 */
    height: 36px;
    padding: 0 20px;
}

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