禁用后在 onClick 事件上再次将输入重置为能够

Posted 2023-03-13

【中文标题】禁用后在 onClick 事件上再次将输入重置为能够

【英文标题】：Reset a input as able again on onClick event after be disable

【发布时间】：2017-05-12 23:40:56

【问题描述】：

我的情况是： 我有一个searchbox 来查找大学，结果中可用的选项之一是I can't found my college。此选项允许您在其他 input type="text" 中手动输入您的大学名称，只有在您单击此选项时才会出现。当您单击选项手动进入学院时，searchbox 变为禁用使用和ng-disable。我需要实现的功能是，当用户再次单击禁用searchbox 时，这个可以再次，隐藏其他输入文本以手动插入大学，让他/她能够再次搜索大学。这是一种情况代码的表示：

模板：

...    
    <div class="input-wrapper">
      <input class="searchbox" ng-disabled="!searching" type="text" ng-model="collegeSearch" ng-click="searchingAgain()">
    </div>

    <br>

    <ul class="result-wrapper" ng-show="searching && collegeSearch.length > 0">
      <li>Result 1</li>
      <li>Result 2</li>
      <li ng-click="insertManually()">I can't found my college</li>
    </ul>

    <input ng-show="!searching" type="text" placeholder="Enter the college name manually">
...

控制器：

angular.module('tAngularApp')
      .controller('MainCtrl', ["$scope", "$rootScope", function ($scope, $rootScope) 
        this.awesomeThings = [
          'html5 Boilerplate',
          'AngularJS',
          'Karma'
        ];

        $scope.searching = true;

        $scope.insertManually = function () 
            $scope.searching = false;
            $scope.collegeSearch = "";
        

        $scope.searchingAgain = function () 
            console.log('Searching ...');
            $scope.searching = true;
        

    ]);

问题是当搜索框输入被禁用时，ng-click 永远不会触发，所以我可以再次激活搜索功能。

有人可以帮我找到解决方案吗？ 谢谢。

【问题讨论】：

这里有一些解决方法。 angular using class instead of disabled attribute。 Event on a disabled input。正如您在问题中所述，禁用的输入不会像启用时那样触发事件。另一种选择是隐藏和显示一个按钮来搜索自定义学校。该按钮可以启用和禁用搜索输入，而不是单击输入本身。这基本上是使用 ngClass （第一个链接）。

谢谢@user3366016。可能是一种方法，但我需要尊重特定的设计，所以我不能添加更多的元素，如按钮。

从 UI 的角度来看，禁用 searchBox 是没有意义的。它有一个用户选择的有效值，即使它被称为Can't find my college

嗯@bhantol 如您所知，客户永远是对的。此外，这个想法并不是那么疯狂，您有两种选择大学的方法： 1- 在数据库选项中搜索。 2-手动添加你的大学。如果用户选择一种方式，另一种方式应该被禁用或隐藏。更适合用户体验。

你能用“ng-readonly=truthy expression”代替“disabled”吗？据我了解，您仍然可以在只读字段中使用 ng-click。

【参考方案1】：

ng-disabled 为 true 时添加属性 disabled。浏览器不会让任何指针事件（生成点击事件）生成。所以控件不会收到任何点击或更改。

所以你可能不得不稍微不同地欺骗这个：

Working plunkr

请注意，我们在包装器 div #input-wrapper 上添加了 ng-click。另外ng-click/ng-change 任何一个都可以输入，但是您可能希望使用 ng-change 来不接收不必要的更改。

<div class="input-wrapper" ng-click="searching = true">
  <input class="searchbox" ng-disabled="!searching" type="text" ng-model="collegeSearch" ng-change="searchingAgain()" ng-model-options=" debounce: 200 ">
  <div class="searchbox-reset"></div>
</div>