如何实现输入框仅按回车键触发loader，输入文本时不启动加载？

安全阿岳

2026-8-29

问题现象

在输入框中键入文本时，加载器（loader）会自动启动加载，预期效果为仅当用户按下回车键时，加载器才触发工作。

现有问题代码

当前逻辑绑定了筛选框的filterChanged事件，该事件会在筛选框内输入任意内容时立刻触发，直接开启加载状态，代码如下：

// Function is called when user enter input any text in filter box
$scope.gridGuestsApi.core.on.filterChanged($scope, function () {
  $scope.direct = false;
  $scope.oppvmware_guestlist_loading = true;  // To show the loader
});

调整方案

移除原有filterChanged事件回调中直接开启加载状态的代码，禁止输入内容变更时立刻触发加载
为筛选框绑定回车键监听事件，仅捕获到Enter键按下动作时，才开启加载状态、执行后续筛选查询逻辑

参考实现代码（基于当前AngularJS 1.x技术栈）：

// 调整原有filterChanged回调，移除直接触发loading的逻辑
$scope.gridGuestsApi.core.on.filterChanged($scope, function () {
  $scope.direct = false;
  // 已移除: $scope.oppvmware_guestlist_loading = true;
});

// 绑定筛选框的键盘按下事件，选择器替换为你项目中实际筛选框的元素标识
angular.element('.grid-filter-input').on('keydown', function (e) {
  // 匹配回车键
  if (e.key === 'Enter' || e.keyCode === 13) {
    e.preventDefault();
    // 触发加载状态
    $scope.oppvmware_guestlist_loading = true;
    // 此处写入原有筛选数据查询、列表刷新的业务逻辑
    $scope.$apply(); // 手动触发视图更新
  }
});