Disabling Mouse Wheel and Arrow Key Interactions in Angular NumericTextBox

When implementing the Angular NumericTextBox in an Angular application, there may be scenarios where you want to restrict certain user interactions such as the use of the mouse wheel and arrow keys for incrementing or decrementing the value. Additionally, you might want to hide the spin buttons that appear by default. This article will guide you through the process of achieving these customizations.

Disabling Mouse Wheel Interaction

To prevent the NumericTextBox from responding to mouse wheel events, you can add an event listener to the mousewheel event and stop its propagation. This can be done in the created event of the NumericTextBox component.

<!-- app.component.html -->
<ejs-numerictextbox
  #numerictextbox
  value="10"
  (created)="preventScroll($event)"
></ejs-numerictextbox>

// app.component.ts
import { ViewChild } from '@angular/core';
import { NumericTextBoxComponent } from '@syncfusion/ej2-angular-inputs';

export class AppComponent {
  @ViewChild('numerictextbox', { static: false })
  numerictextbox: NumericTextBoxComponent;

  preventScroll() {
    this.numerictextbox.element.addEventListener('mousewheel', function (e) {
      e.stopImmediatePropagation();
    });
  }
}

Disabling Arrow Key Interaction

To disable the arrow up and arrow down key interactions, you can override the keyDownHandler method of the NumericTextBox component. This will prevent the default behavior when these keys are pressed.

// app.component.ts continued
import { Component, OnInit } from '@angular/core';
import { NumericTextBoxComponent } from '@syncfusion/ej2-angular-inputs';

@Component({
  // component metadata
})
export class AppComponent implements OnInit {
  // ... (other code)

  ngOnInit(): void {
    (NumericTextBoxComponent as any).prototype.keyDownHandler = function (e) {
      if (!this.readonly) {
        switch (e.keyCode) {
          case 38: // Arrow Up
          case 40: // Arrow Down
            e.preventDefault();
            break;
        }
      }
    };
  }
}

Hiding the Spin Buttons

If you wish to hide the spin buttons, you can set the showSpinButton property to false in the NumericTextBox component.

<!-- app.component.html updated -->
<ejs-numerictextbox
  #numerictextbox
  value="10"
  [showSpinButton]="false"
  (created)="preventScroll($event)"
></ejs-numerictextbox>

By following these steps, you can effectively disable mouse wheel and arrow key interactions and hide the spin buttons in the NumericTextBox component.

To see a working example, please check the sample from the link below:

NumericTextBox Sample

Additional References

• NumericTextBox Created Event Documentation: EJ2 Documentation
• NumericTextBox showSpinButton Property Documentation: EJ2 Documentation