移动端网站输入框失焦收起键盘问题求助（Angular JS+Android）

我之前在Android设备上也碰到过类似的焦点残留问题，尤其是摩托罗拉这类机型的系统键盘，有时候对焦点的处理确实有点“顽固”。针对你的AngularJS场景，这里有几个实用的解决方案：

方案一：提交函数中直接触发输入框失焦 #

在你的搜索提交逻辑执行完成后，直接调用输入框的blur()方法让它失去焦点，这样键盘就会自动收起。

如果你的输入框有唯一ID，比如id="searchInput"，可以在控制器的提交函数里这么写：

$scope.submitSearch = function() {
    // 先执行你的搜索业务逻辑
    // 比如调用接口、处理搜索结果等
    console.log('执行搜索:', $scope.searchQuery);

    // 让输入框失焦
    angular.element('#searchInput').blur();
};

更符合AngularJS最佳实践的方式是用ng-ref指令绑定元素，避免直接依赖DOM选择器：

<input type="text" ng-model="searchQuery" ng-ref="searchInput" ng-keydown="submitOnEnter($event)">

控制器里直接通过$scope获取绑定的元素：

$scope.submitSearch = function() {
    // 搜索逻辑...
    $scope.searchInput.blur();
};

方案二：用$timeout确保失焦操作在DOM更新后执行 #

有时候Angular的消化周期（digest cycle）会影响DOM操作的时机，导致直接调用blur()没效果。这种情况下可以用$timeout把失焦操作放到下一个周期执行：

$scope.submitSearch = function() {
    // 异步执行搜索逻辑，比如调用API
    SearchService.query($scope.searchQuery).then(function(results) {
        $scope.searchResults = results;
        
        // 用$timeout确保DOM更新后再失焦
        $timeout(function() {
            $scope.searchInput.blur();
        }, 0);
    });
};

这里的0延迟不是真的等0秒，而是让Angular先完成当前的DOM更新和数据绑定，再执行失焦操作。

方案三：在回车事件触发时直接处理焦点 #

既然你的提交逻辑是绑定回车键触发的，可以在键盘事件处理函数里，按下回车后立即让输入框失焦：

$scope.submitOnEnter = function(event) {
    if (event.keyCode === 13) {
        // 阻止默认的表单提交行为（如果有的话）
        event.preventDefault();
        
        // 执行搜索
        $scope.submitSearch();
        
        // 直接让当前输入框失焦
        angular.element(event.target).blur();
    }
};

额外注意事项 #

• 记得在控制器里注入需要的服务，比如$timeout、$element（如果是指令里的话）；
• 一定要在真机上测试，模拟器的键盘行为可能和摩托罗拉实际设备有差异；
• 如果是使用AngularJS表单指令（ng-form/form），也可以在ng-submit绑定的函数里添加失焦逻辑，效果是一样的。

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