移动端Safari中AngularJS的<select>绑定ng-change后异常自动弹出问题

这个问题我之前做AngularJS项目时也碰到过，iOS Safari的原生select组件确实有不少让人头疼的小坑，咱们来一步步拆解原因和解决方案：

异常原因 #

iOS Safari的原生<select>组件在焦点管理上有特殊的行为逻辑：当你通过ng-change触发路由跳转时，虽然页面已经完成重定向，但浏览器可能没有正确释放之前select元素的焦点状态。或者说，AngularJS的路由切换导致DOM重新渲染时，iOS的浏览器引擎错误地保留了select的激活状态，后续点击页面其他元素时，浏览器会误判为要触发这个select的弹出操作。

简单总结就是：选择完成后select的焦点没被彻底释放，路由跳转后浏览器还“惦记”着它，一有点击就自动弹出来了。

解决方案 #

方案1：手动释放select焦点 #

给你的select元素添加一个id，然后在ChangeCourse函数里手动调用blur()方法，强制释放焦点后再执行路由跳转：

修改后的HTML：

<select id="courseSelect" ng-options="Course.CourseId as (Course.CourseTitle) for Course in Courses" ng-change="ChangeCourse(Course.CourseId)" ng-model="Course.CourseId"></select>

对应的JS函数：

$scope.ChangeCourse = function(CourseId) {
  // 找到select元素并释放焦点
  const selectEl = document.getElementById('courseSelect');
  if (selectEl) {
    selectEl.blur();
  }
  $state.go("Editor.Course", { CourseId: CourseId });
};

方案2：配合$timeout延迟路由跳转 #

有时候DOM操作是异步的，直接blur后跳转可能还没生效，可以用AngularJS的$timeout做一个微延迟，确保焦点释放完成后再执行路由：

记得先在控制器里注入$timeout服务，然后修改函数：

$scope.ChangeCourse = function(CourseId) {
  const selectEl = document.getElementById('courseSelect');
  if (selectEl) {
    selectEl.blur();
    $timeout(() => {
      $state.go("Editor.Course", { CourseId: CourseId });
    }, 0);
  }
};

方案3：检查ngModel初始化 #

另外还要确保新页面的控制器初始化时，Course.CourseId有正确的初始值，避免因为数据绑定异常导致select状态错乱。比如在控制器启动时：

// 从路由参数获取当前CourseId，没有则默认第一个课程
$scope.Course = {
  CourseId: $stateParams.CourseId || 
            ($scope.Courses.length > 0 ? $scope.Courses[0].CourseId : null)
};

验证效果 #

做完以上修改后，在iPhone的Safari里测试：选择年级点击完成后，select的焦点会被强制释放，路由跳转后再点击其他按钮，就不会自动弹出下拉框了。

内容的提问来源于stack exchange，提问作者think.arthur