javascript - 如何禁用数字 slider 上的 Tab 键(数字 slider 在 Angular js 中)？

Question

我想禁用默认编辑页面。单击编辑时，我应该可以进行编辑。

所以我尝试使用以下代码禁用编辑。但这仅适用于鼠标操作。如果我使用任何键盘快捷方式，例如 Tab 键 + Enter。我能够编辑页面。如何克服这个问题。主要问题出在数字 slider 上。

<script>
    $( document ).ready(function() {
        $('#runtest').css('pointer-events','none');
        $('#savebtn').attr('disabled',true);
    });
    </script>

    <script>
    function edit_page() {
        $('#runtest').css('pointer-events','');
        $('#savebtn').attr('disabled',false);
    }
    </script>

下面是我的数字 slider 代码，使用数字 slider 所需的 Angular js。

<div ng-controller="AppCtrl" ng-cloak="" class="sliderdemoBasicUsage" ng-app="MyApp" style= background-color: white">
    <md-content style="margin: 16px; padding:10px; background-color: white">
        <md-slider-container>
            <span class="md-body-1 col-xs-4"><b>Numbers</b></span>
            <md-slider ng-model="disabled" min="1" max="100" aria-label="Disabled" md-discrete="" id="blue-slider" class="md-primary" style="margin-left: 60px;"></md-slider>
            <md-input-container>
                <input type="number" id="nums" name="Concurrency" ng-model="disabled" min="1" max="100" ng-init="disabled=10" aria-label="blue" aria-controls="blue-slider">
            </md-input-container>
        </md-slider-container>
    </md-content>
</div>

<!-- The below links are related to the slidebar-->
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js'></script>
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-animate.min.js'></script>
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-route.min.js'></script>
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.min.js'></script>
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-messages.min.js'></script>
        <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
        <script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.9/angular-material.js'></script>

        <script>
        angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
          .controller('AppCtrl', function ($scope) {

            $scope.color = {
              red: Math.floor(Math.random() * 255),
              green: Math.floor(Math.random() * 255),
              blue: Math.floor(Math.random() * 255)
            };

          });
        </script>

下面是图片

Answer 1

这对我有用。与 angularjs 中使用的属性一样。我们可以将 id 添加到属性中，如下所示。

<md-slider ng-model="disabled" id="blue-slider" min="1" max="100" aria-label="Disabled" md-discrete="" class="md-primary" style="margin-left: 60px;">
</md-slider>
<md-input-container>
    <input type="number" id="nums" name="Concurrency" ng-model="disabled" min="1" max="100" ng-init="disabled=10" aria-label="blue" aria-controls="blue-slider">
</md-input-container>

这是默认禁用 slider

<script>
    $( document ).ready(function() {
        $('#blue-slider').attr('disabled',true);
        $('#nums').attr('disabled',true);
    });
</script>

如果你想再次启用 slider 。调用以下函数。

<script>
    function edit_page() {
        $('#blue-slider').attr('disabled',false);
        $('#nums').attr('disabled',false);
        return false;
    }
</script>