ng-keypress event scrolls the page down

Question

I'm a beginner with angularjs and i try to understand why my component (a "checkbox simulation" with fontawesome icons) scroll the page down when user press the space key.

here is my component :

ugoFmk.component('ugoFmkCheck', {
    bindings: {
        label: '<',
        isSelected: '<',
        isToggleOnKeypress: '<',
        toggleCheck: '&',
        checkedClass: '<',
        uncheckedClass: '<'
    },
    controller: function ugoCheckController() {
        var vm = this;

        vm.$onInit = function () {
            if (vm.isToggleOnKeypress === undefined)
                vm.isToggleOnKeypress = true;
            if (vm.checkedClass === undefined)
                vm.checkedClass = 'fa fa-check-square-o';
            if (vm.uncheckedClass === undefined)
                vm.uncheckedClass = 'fa fa-square-o';
        }
        vm.getCheckboxClass = function () {
            return vm.isSelected ? vm.checkedClass : vm.uncheckedClass;
        }
        vm.runOnKeyPress = function (e) {
            if (vm.isToggleOnKeypress === false)
                return;
            if (e.which === 32)
                vm.toggleCheck();
        }
    },
    template: "<span tabindex='0' ng-keypress='$ctrl.runOnKeyPress($event);' ng-click='$ctrl.toggleCheck()'><i ng-class=\"$ctrl.getCheckboxClass()\"></i> {{$ctrl.label}}</span>"
});

and its use :

<div class="col-lg-offset-1 col-lg-3" ng-class="{'has-error': vm.hasCiviliteError()}">
<div class="input-group input-group-sm">
    <span class="input-group-addon" id="spnCivilite">Civilité</span>
    <div tabindex="0" class="form-control" name="divCivilite" id="divCivilite" ng-focus="vm.makeCiviliteDirty()" ng-blur="vm.makeCiviliteDirty()">
        <ugo-fmk-check ng-repeat="opt in vm.civilites" 
                        is-selected="opt.selected" 
                        toggle-check="vm.selectCivilite(opt.Code)" 
                        label="opt.Code" 
                        style="margin-right:20px" 
                        ng-focus="vm.makeCiviliteDirty(false)" 
                        ng-blur="vm.makeCiviliteDirty(true)"
                        ng-class="{'color-placeholder':!opt.selected}"></ugo-fmk-check>
    </div>
    <i class="glyphicon glyphicon-remove form-control-feedback" ng-show="vm.hasCiviliteError()"></i>
</div>
<div ng-show="vm.hasCiviliteError()" class="text-danger small">
    <span>* Cette zone est obligatoire</span>
</div>

and the result :

score 3 · Accepted Answer · edited May 23 '17 at 12:00

3

Scrolling to the end of the page with spacebar is the standard behavior for most browsers/websites.

A quick and simple solution/fix to this is proposed here: HTML prevent space bar from scrolling page

edited May 23 '17 at 12:00

Community

1
1

answered Feb 21 '17 at 10:27

uzr

1,210
1
13
26

1

oh ! i did not know ! I change my code and use keydown event and if it's spacebar key, I cancel the event... its working !!! thanks – lolo Feb 21 '17 at 11:00

ng-keypress event scrolls the page down

1 Answers1