Angular - 捕获退格键按下事件

Question

我将尝试通过ngKeypress、ngKeydown和ngKeyup来捕获backspace按键，参考如何检测keydown或keypress问题。以下是我的HTML代码：

<input 
       name="inputText" 
       type="text" 
       class="{{schema.class.control_part_class}} form-control" 
       data-ng-model="data[schema.model]"
       ng-keydown = "changeInput($event)">
</input>

并且 directive 的链接函数：

scope.changeInput = function(e){       
     $log.log('scope', scope); //scope
     $log.log('cont', controller); //controller
     $log.log(e); //works for any other key
     if(e.keyCode === 8){
         //keycode for backspace
         $log.log('backspace') 
     }     
};

我尝试在ngKeypress、ngKeydown和ngKeyup之间进行替换，但都无效。

完整代码： html

<div form-field-injector schema="vm.schema" data="vm.data">
                <span class="star-color-red" ng-show="schema.validation.required">*</span>
                <label class="{{schema.class.label_part_class}} label-control">{{::schema.name}}
                </label>
                <input 
                    name="inputText" 
                    type="text" 
                    class="{{schema.class.control_part_class}} form-control" 
                    data-ng-model="data[schema.model]"
                    data-ng-model-options="{ debounce: 300 }" 
                    data-ng-disabled="{{::schema.disabled}}"
                    ng-keydown = "changeInput($event)"></input>

指令：

(function () {
    'use strict';

    function IsrTextField($log, $compile, $templateRequest) {
        $log = $log.getInstance('IsrTextField.directive', true);
        $log.debug("load()");

        var _templateUrl = 'common/directives/isr-text-field/templates/isr.text.field.tpl.html';
        var _inputElement = null;

        function _link(scope, iElem, iAttrs, controller) {   
            $log.log('scope input', scope);
            function _onBlur() {
                $log.debug("_onBlur()");
                controller.eventRunner(controller.schema.events.on_blur.action, {
                    item: controller.schema.events.on_blur.args
                });
            }
            scope.changeInput = function(e){
                 $log.log('scope', scope); //scope
                 $log.log('cont', controller); //controller
                 $log.log(e); //works for any other key
                 if(e.keyCode === 8){
                    //keycode for backspace
                    $log.log('backspace') 
                 }
             };


            //1. request template from server
            // Load the html through $templateRequest
            $templateRequest(_templateUrl)
                .then(function success(html) {
                    // Convert the html to an actual DOM node
                    var template = angular.element(html);
                    // Append it to the directive element
                    iElem.append(template);

                    // 1. get input element from template
                    _inputElement = $('.form-control', iElem);
                    if (!_inputElement) {
                        $log.warn("there is no .form-control element class");
                        return;
                    }

                    // set template attributes from schema (before compile)
                    if (controller.schema.modelOptions) {
                        _inputElement.attr("data-ng-model-options", controller.schema.modelOptions);
                    }

                    // set events/bind from schema
                    if (controller.schema.events && controller.schema.events.on_blur) {
                        if (controller.schema.events.on_blur.action) {
                            _inputElement.on('blur', _onBlur);
                        }
                    }

                    // And let Angular $compile it
                    $compile(template)(scope);
                }, function failure(error){
                    $log.error(error);
                });

            // cleanup
            scope.$on('$destroy',
                function destroy() {
                    $log.debug("destroy()");
                    if (_inputElement) {
                        _inputElement.off('blur', _onBlur);
                        _inputElement = null;
                    }
                });

        }

        var directive = {
            restrict: 'EA',
            scope: {
                schema: '=',
                data: '='
            },
            controller: 'isrTextFieldController',
            controllerAs: 'vm',
            bindToController: true,
            link: _link
        };

        return directive;

    }

    angular
        .module('common')
        .directive('isrTextField', IsrTextField);

})();

- Itsik Mauyhas

---

发生了什么？函数被调用了吗？输出是什么？ - ssc-hrep3

什么都不要做，甚至不要改变changeInput函数。 - Itsik Mauyhas

发布完整的代码。 - dfsq

也添加控制器吗？ - Itsik Mauyhas

如果您将指令命名为isrTextField，为什么在您的HTML代码中我没有看到任何对isr-text-field的引用？ - Marco Moretti

Answer 1

在控制器中

我编写了一个干净的示例，你的代码似乎可以工作。

JavaScript：

angular.module('myApp', [])
  .controller('TestController', TestController);

function TestController($scope, $log) {
  $scope.changeInput = function(e) {
    $log.log('scope', $scope); //scope
    $log.log(e); //works for any other key
    if (e.keyCode === 8) {
      //keycode for backspace
      $log.log('backspace');
    }
  };
}

HTML:

<div ng-controller="TestController as test">
  <input name="inputText"
         type="text"
         ng-keyup="changeInput($event)">
</div>

JSFiddle: http://jsfiddle.net/wcws0ubm/1/

---

在指令中

如果你想将 <input> 封装到一个指令中，你可以使用以下代码：

HTML：

<div ng-controller="TestController as test">
  <test-element></test-element>
</div>

JavaScript:

angular.module('myApp', [])
  .controller('TestController', ['$log', TestController])
  .directive('testElement', ['$log', testElement]);

function TestController($log) {
  $log.log("Controller loaded");
}

function testElement($log) {
  return {
    restrict: 'E',
    template: '<input name="inputText" type="text" ng-keyup="changeInput($event)">',
    link: function(scope) {
      scope.changeInput = function(e) {
        $log.log('scope', scope); //scope
        $log.log(e); //works for any other key
        if(e.keyCode === 8) {
          //keycode for backspace
          $log.log('backspace');
        }
      }
    }
  };
}

JSFiddle: http://jsfiddle.net/wcws0ubm/3/

- ssc-hrep3

---

如果我想将其保留在我的指令中（使其更清晰），是否有其他选项？ - Itsik Mauyhas

@ItsikMauyhas 我添加了一个简单的解决方案，将代码移动到指令中。 - ssc-hrep3

Answer 2

使用Angular 2+，你可以直接在元素上绑定Backspace事件，用keydown/keyup实现。

使用特殊修饰键和组合键

此功能适用于特殊和修饰键，如Enter、Esc、Shift、Alt、Tab、Backspace和Cmd：

键	键名
Enter	<input (keydown.enter)="...">
Esc	<input (keydown.esc)="...">
Shift	<input (keydown.shift)="...">
Alt	<input (keydown.alt)="...">
Tab	<input (keydown.tab)="...">
Backspace	<input (keydown.backspace)="...">
Ctrl	<input (keydown.control)="...">
Cmd	<input (keydown.meta)="...">

但它也适用于字母、数字、箭头和功能键（F1到F12）。

键名	键名解释
A	<input (keydown.a)="...">
9	<input (keydown.9)="...">
↑	<input (keydown.arrowup)="...">
F4	<input (keydown.f4)="...">

来源: https://www.digitalocean.com/community/tutorials/angular-binding-keyup-keydown-events

- Pierre