CODEWITHSUNDEEP
androidnativescript
Pavan Vora
Pavan Vora

Reputation: 1744

How to show keyboard when page loads in android app with nativescript?

The first page of my android application has one input field. So what I want is when this page loads I want to show keyboard automatically without doing tap on the input field.

Upvotes: 4

Views: 3493

Answers (2)

Brendan
Brendan

Reputation: 938

To focus the field and trigger the keyboard in Android with NativeScript and Angular:

  1. Name your element in your template: <TextField #myInput [...]></TextField>

  2. Use it in your component file:

    import { ElementRef, OnInit } from "@angular/core";

[...]

export class MyComponent implements OnInit {
  @ViewChild("myInput") myInput: ElementRef;

  [...]

  ngOnInit() {
    setTimeout(() => this.myInput.nativeElement.focus(), 0);
  }
}

Upvotes: 2

Steve Oliver
Steve Oliver

Reputation: 96

pkanev's comment is true on ios; ie, just focus on the text field and ios will open up the keyboard.

But on Android you need to do some extra work -- 

var utils = require("tns-core-modules/utils/utils");

var myTextfield = page.getViewById("myTextFieldId");

if (myTextfield.ios) {
    console.log("myTextfield.ios");

    // on ios this will open the keyboard but not on android
    myTextfield.focus();
}

if (myTextfield.android) {
    console.log("myTextfield.android");

    setTimeout(function() {

        // places the cursor here but doesn't open the keyboard
        myTextfield.android.requestFocus();

        var imm = utils.ad.getInputMethodManager();

        imm.showSoftInput(myTextfield.android, 0);

    }, 300);
}

Notice the use of setTimeout which is what you would need to do in native Android too.

Upvotes: 6

Related Questions