加载Spinner运行时如何禁止修改文本框数据？

这个场景我太熟悉了！很多时候我们只关注了加载动画的展示，却忽略了表单控件的实际禁用——这就是为什么Spinner转起来了，文本框还能继续输入的原因。下面给你几个实用的解决方案，都是基于AngularJS（从ng-change判断你用的是这个框架）的：

方案一：用ng-disabled绑定加载状态（推荐） #

这是最直接也最符合用户直觉的方式：当加载状态isLoading为true时，直接禁用文本框。这样不仅不能输入，光标会自动离开，控件也会呈现禁用样式，用户一眼就知道不能操作了。

模板代码： #

<!-- 文本框绑定ng-disabled到加载状态 -->
<input 
  type="text" 
  ng-model="formData.inputValue" 
  ng-change="handleInputChange()" 
  ng-disabled="isLoading"
>

<button ng-click="submitForm()">提交</button>

<!-- 加载Spinner -->
<div class="loading-spinner" ng-show="isLoading">
  <!-- 你的Spinner动画代码 -->
</div>

控制器逻辑： #

$scope.isLoading = false;

$scope.submitForm = function() {
  $scope.isLoading = true;
  
  // 模拟API请求或耗时操作
  yourApiService.submitData($scope.formData)
    .then(function(response) {
      // 处理成功逻辑
    })
    .catch(function(error) {
      // 处理错误逻辑
    })
    .finally(function() {
      // 不管成功失败，结束加载状态
      $scope.isLoading = false;
    });
};

$scope.handleInputChange = function() {
  // 额外防护：如果处于加载状态，直接退出ng-change逻辑
  if ($scope.isLoading) return;
  
  // 原本的输入处理逻辑
};

方案二：通过事件阻止输入（适合不想禁用控件的场景） #

如果因为样式需求不想让文本框变灰，可以监听输入相关事件，在加载时阻止输入行为。这种方式能保留控件样式，但需要处理更多事件（按键、粘贴等）。

模板代码： #

<input 
  type="text" 
  ng-model="formData.inputValue" 
  ng-change="handleInputChange()"
  ng-keydown="blockInputOnLoading($event)"
  ng-paste="blockInputOnLoading($event)"
>

控制器逻辑： #

$scope.blockInputOnLoading = function(event) {
  if ($scope.isLoading) {
    event.preventDefault(); // 阻止默认输入行为
    event.stopPropagation(); // 停止事件冒泡
  }
};

// submitForm和handleInputChange逻辑同方案一

额外注意点 #

• 遮罩层辅助：如果你的Spinner有全屏/表单遮罩层，确保它的z-index足够高，能覆盖整个表单区域，防止用户点击其他控件，但遮罩层无法阻止已聚焦的文本框输入，所以还是要配合上面的方案。
• 模型防护：即使通过某些非常规方式（比如控制台修改模型），ng-change里的判断也能阻止后续逻辑执行，避免脏数据提交。

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