Nativescript: Key Listener Feature for TextFields/TextView

Created on 13 Jun 2019 · 11Comments · Source: NativeScript/NativeScript

@virtualbjorn commented on Wed Jun 12 2019

Is your feature request related to a problem? Please describe.

I wanted to capture the "Clear/Del key" event even if textfield is already empty
Describe the solution you'd like

Maybe add key events from soft input.
Describe alternatives you've considered

Additional context

It will definitely be a big help for those who needs to handle different input keys

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

feature

Source

tsonevn

Most helpful comment

HI @virtualbjorn,
We reviewed your case and marked this as a feature request. As a temporary solution for Android, you can set up the setOnKeyListener listener via code behind and check the returned key code. For example:

 <TextField id="field1" loaded="tfloaded" row="0" col="0" />

export function tfloaded(args) {

    let field: TextField = args.object;
        field.android.setOnKeyListener(new android.view.View.OnKeyListener({
            onKey: function (view, keyCode, keyevent) {
                if(keyCode == android.view.KeyEvent.KEYCODE_DEL){
                    console.log("backspace tapped");
                }


                return false;
            }
        }))
}



md5-9bfa3c08e2814712ffc19832453f9f9e







md5-d99a366eb5babb898868e3e25dc51698



```TypeScript
export function tfloaded(args) {

  setTimeout(()=>{
            let newDelegate = delegateModule.newUITextFieldDelegateImpl.initWithOriginalDelegate((<any>field)._delegate);

            (<any>field)._delegate = newDelegate;
            field.ios.delegate=newDelegate;

        }, 100);
}

I am also attaching a sample app, where both scenarios(for Android and iOS) have been shown.

Archive.zip

tsonevn on 13 Jun 2019

👍3

All 11 comments

 <TextField id="field1" loaded="tfloaded" row="0" col="0" />

export function tfloaded(args) {

    let field: TextField = args.object;
        field.android.setOnKeyListener(new android.view.View.OnKeyListener({
            onKey: function (view, keyCode, keyevent) {
                if(keyCode == android.view.KeyEvent.KEYCODE_DEL){
                    console.log("backspace tapped");
                }


                return false;
            }
        }))
}



md5-9bfa3c08e2814712ffc19832453f9f9e







md5-d99a366eb5babb898868e3e25dc51698



```TypeScript
export function tfloaded(args) {

  setTimeout(()=>{
            let newDelegate = delegateModule.newUITextFieldDelegateImpl.initWithOriginalDelegate((<any>field)._delegate);

            (<any>field)._delegate = newDelegate;
            field.ios.delegate=newDelegate;

        }, 100);
}

I am also attaching a sample app, where both scenarios(for Android and iOS) have been shown.

Archive.zip

tsonevn on 13 Jun 2019

👍3

Hi! @tsonevn thanks for the very quick work! Will try this one once I'm available and will report back here.

virtualbjorn on 13 Jun 2019

👍1

Works very well, But it fires event twice for KeyUp and KeyDown.
Adding extra filter solves this issue on Android.

  if (
    keyCode == android.view.KeyEvent.KEYCODE_DEL &&
    keyevent.getAction() == android.view.KeyEvent.ACTION_DOWN
  ) {
    console.log("backspace tapped");
  }

mehulcs on 13 Jun 2019

And adding keyListener for multiple TextFields is cumbersome. Any solution for that?

mehulcs on 13 Jun 2019

HI @mehulcs,
I haven't tested thesetOnKeyListener with multipleTextField. I will test this scenario on my side and will check if there is a solution.

tsonevn on 14 Jun 2019

@tsonevn I tried testing on iOS but the textFieldShouldChangeCharactersInRangeReplacementString doesn't seem to trigger when the field is empty.
Only triggers on non-empty textfields

virtualbjorn on 15 Jun 2019

HI @virtualbjorn,
textFieldShouldChangeCharactersInRangeReplacementString will be triggered when there is a change in the Field's text. On that matter, it is expected the listener to not been trigger when the field is empty.

tsonevn on 18 Jun 2019

I figured but is there any way that we can capture soft input key presses even if textfield is empty? Android implementation is fine as it listens to keys pressed even if textfield is empty.

Like from UIKeyInput
Found this https://stackoverflow.com/a/15801258 but doesn't know how to properly insert it into the delegate.

virtualbjorn on 18 Jun 2019

Hi @virtualbjorn,
I reviewed the attached SO thread, and it seems that you need to overwrite deleteBackward method. However, at this stage, I was unable to find an elegant way to overwrite this method. To do that, you have to create your custom component, which extends the UITextField. You can check how this has been done for TextField component (as a reference, you can review the code in text-field.ios.ts. Keep in mind that, creating such a component might be hard for maintenance and the functionality that provides most of the style support should be manually implemented.

tsonevn on 20 Jun 2019

Did anybody manage to get a cross-platform working solution for this? (especially on empty text fields)