Disabling Mouse Wheel and Arrow Key Interactions in Angular NumericTextBox

In this article, we guide you on how to disable 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

Conclusion

I hope you enjoyed learning how to create an organizational chart using JSON data in Angular Diagram. You can refer to our Angular Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our NumericTextbox example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!