Question

我想禁用默认编辑页面。点击编辑，我应该可以编辑。

所以我尝试使用以下代码禁用编辑。但这只适用于鼠标操作。如果我使用任何键盘快捷键，如tab键+ Enter。我可以编辑页面。如何克服这个问题。主要问题在于数字滑块。

<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>

下面是我使用数字滑块所需角度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>

这是默认情况下禁用滑块

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

如果要再次启用滑块。调用下面的函数。

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

如何禁用数字滑块上的Tab键（数字滑块是角度js）？

1 个答案: