auto trim non-numeric pasted data

[Akhter]

How can I let users paste '   123456  ' into my numeric textbox and have it auto-strip the spaces? There are spaces in the beginning and in the end too. 

currently if there is any space at the beginning or at the end, it doesn't paste anything, show some sign of exclamation and value disappears.

 

<kendo-numerictextbox  k-format="'#'"  ng-model="[e-mail]">
        </kendo-numerictextbox>

I also tried this where I am making dynamically kendo control as shown below:

<input kendo-numeric-text-box k-format="'#'"  ng-model="[e-mail]" />

I have tried every possible solution, 

Can you please assist how can I achieve this in Angular JS ?

 

Thanks, 

Umair.

[Anton Mironov]

Hi Akhter,

Thank you for the provided details.

In order to achieve the needed behavior in Angular.js, I would recommend using the autocorrect functionality of the Kendo UI NumericTextBox.
Here is an example:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <p>Enter value between -200000 and 200000.</p>
        <kendo-numerictextbox
            [autoCorrect]="autoCorrect"
            [min]="min"
            [max]="max"
            [value]="value"
        ></kendo-numerictextbox>
    `
})

export class AppComponent {
    public autoCorrect = true;
    public min = -200000;
    public max = 200000;
    public value = 2;
}

The complete implementation and behavior could be found in the following stackblitz example:

• https://stackblitz.com/edit/angular-yyz4nu-nb8qt1?file=app/app.component.ts

Furthermore, the following forum thread answer is providing an approach to handling the "onPaste" event:

• https://www.telerik.com/forums/auto-trim-non-numeric-pasted-data#d54sfpl-YU-qmePnD06ELw

Give the approaches above a try and let me know if they achieved the required behavior or further assistance is needed.

Kind Regards,
Anton Mironov
Progress Telerik

[Akhter]

Hi Anton, 

I am working on AngularJS while you have provided solution for Angular (latest version). I know in Angular with min,max  we can find it there. but with AngularJS I could not generate this behavior. 

Please suggest as the other links are 3 years old, I guess, there must be some solution.

[Anton Mironov]

Hello Akhter,

Thank you for your patience. 

In this case, I would recommend handling the "onPaste" event of the numeric input. In the event handler, prevent the default behavior, replace the unneeded data, and set the parsed result as a value for the Kendo UI NumericTextBox.

I created a sample for the approach above. It is in JavaScript. Hope it will help:

• https://dojo.telerik.com/@anton.mironov/ayIkoRuZ

Give a try to the implementation above and let me know if this is the expected behavior, or further assistance is needed.

Greetings,
Anton Mironov
Progress Telerik