HTML表单切换时，slideDown回调中$(element).focus()失效问题求助

嘿，我懂你碰到的这个小麻烦——动画切换表单后没法自动聚焦到第一个输入框对吧？其实核心原因很简单：slideDown是异步动画，如果在动画还没结束时就调用focus()，元素可能还没完全显示出来，导致焦点设置失效。

你只需要在slideDown的回调函数（也就是动画完成后才会执行的函数）里，找到目标表单的第一个输入框并调用focus()就行。给你修正后的代码示例：

// 处理借阅表单的切换逻辑
$("#addRadio").click(function(){ 
  $("#takeForm").slideUp(); 
  $("#addForm").slideDown(400, function(){
    // 找到当前表单内第一个可见的文本输入框并设置焦点
    $(this).find('input[type="text"]:visible').first().focus();
  });
});

// 对应归还表单的切换也要加上焦点设置
$("#takeRadio").click(function(){ 
  $("#addForm").slideUp(); 
  $("#takeForm").slideDown(400, function(){
    $(this).find('input[type="text"]:visible').first().focus();
  });
});

几个实用的细节补充： #

• $(this)在回调里指代的就是刚完成动画的表单元素（比如#addForm），不用重复写选择器，代码更简洁。
• 如果你的表单第一个输入框不是text类型（比如是number、email这类），可以把选择器改成'input:visible:first'，这样能匹配任何可见的第一个输入控件，兼容性更强。
• 如果页面加载时默认有单选按钮处于选中状态，记得初始化时也触发一次焦点设置，避免页面打开时焦点缺失：

$(document).ready(function(){
  // 检查默认选中的单选按钮，设置对应表单的焦点
  if($("#addRadio").is(':checked')){
    $("#addForm").find('input:visible:first').focus();
  } else if($("#takeRadio").is(':checked')){
    $("#takeForm").find('input:visible:first').focus();
  }
});

这样不管是切换单选按钮还是页面首次加载，对应的表单第一个输入框都会自动获得焦点啦！

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