I want focus to be set on my <ion-input> as I enter the page
This is my typescript code:
import { Component, Input, ViewChild,ElementRef,Renderer } from '@angular/core'; import { NavController, PopoverController, NavParams, ViewController, ModalController } from 'ionic-angular'; @Component({ selector: 'page-comments', templateUrl: 'comments.html' }) export class CommentsParentPage { @ViewChild('input') myInput; constructor(public navCtrl: NavController,private renderer: Renderer, private elementRef: ElementRef, public modalCtrl: ModalController) { } ionViewLoaded() { setTimeout(() => { let element = this.elementRef.nativeElement.querySelector('input'); this.renderer.invokeElementMethod(element, 'focus', []); },150); } } And this is what i have done with my html file:
<ion-item> <ion-input set-focuser type="text" placeholder="Write Your Comments" [(ngModel)]="addComment"></ion-input> </ion-item> Whenever I enter this page of my application, I would like the keyboard to be opened and focus to be set on ion-input
My config.xml includes:
<preference name="KeyboardDisplayRequiresUserAction" value="false" /> package.json
{ "name": "sample app", "author": "", "homepage": "http://ionicframework.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/common": "2.2.1", "@angular/compiler": "2.2.1", "@angular/compiler-cli": "2.2.1", "@angular/core": "2.2.1", "@angular/forms": "2.2.1", "@angular/http": "2.2.1", "@angular/platform-browser": "2.2.1", "@angular/platform-browser-dynamic": "2.2.1", "@angular/platform-server": "2.2.1", "@ionic-native/core": "^3.4.4", "@ionic-native/keyboard": "^3.4.4", "@ionic/cloud-angular": "^0.10.0", "@ionic/storage": "1.1.7", "angular2-moment": "^1.1.0", "google-libphonenumber": "^2.0.14", "ionic-angular": "2.0.0-rc.4", "ionic-gallery-modal": "0.0.7", "ionic-native": "2.2.11", "ionicons": "3.0.0", "rxjs": "5.0.0-beta.12", "zone.js": "0.6.26" }, "devDependencies": { "@ionic/app-scripts": "1.0.0", "typescript": "2.0.9" }, "cordovaPlugins": [ "ionic-plugin-keyboard", "cordova-plugin-whitelist", "cordova-plugin-console", "cordova-plugin-statusbar", "cordova-plugin-device", "cordova-plugin-splashscreen", "cordova-sqlite-storage", "cordova-plugin-x-toast", "cordova-plugin-camera", "cordova-plugin-compat", "cordova-plugin-image-picker", "cordova.plugins.diagnostic", { "id": "phonegap-plugin-push", "locator": "phonegap-plugin-push", "variables": { "SENDER_ID": "461076790064" } }, "cordova-plugin-contacts", "ionic-plugin-deploy", "cordova-plugin-x-socialsharing", { "locator": "https://github.com/napolitano/cordova-plugin-intent", "id": "com.napolitano.cordova.plugin.intent" }, "cordova-plugin-screen-orientation", "cordova-plugin-file", "cordova-plugin-file-transfer" ], "cordovaPlatforms": [ { "platform": "android", "version": "", "locator": "android" } ], "description": "ionic2: An Ionic project" } 4 Answers
Answers 1
use ngAfterViewChecked:
See plnkr here
import { Component, Input, ViewChild,ElementRef,Renderer, AfterViewChecked,ChangeDetectorRef } from '@angular/core'; import { NavController, PopoverController, NavParams, ViewController, ModalController } from 'ionic-angular'; @Component({ selector: 'page-comments', templateUrl: 'comments.html' }) export class CommentsParentPage implements AfterViewChecked { @ViewChild('input') myInput; needsFocus: boolean; constructor(public navCtrl: NavController,private renderer: Renderer, private elementRef: ElementRef, public modalCtrl: ModalController, private _changeDetectionRef: ChangeDetectorRef) { } ionViewDidEnter() { this.needsFocus = true; } public ngAfterViewChecked(): void { if (this.needsFocus) { this.needsFocus = false; this.myInput.setFocus(); this._changeDetectionRef.detectChanges(); } } Answers 2
You can do it using Directive as shown below.Hope code is self-explanatory.If you have any issue please comment below.
Play with Git Repo code.
You can View this on Ionic View: Id = F5F367AE
Note: Just tap My Page.
set-focuser.ts
import { Directive, Renderer, ElementRef } from '@angular/core'; import { Keyboard } from '@ionic-native/keyboard'; @Directive({ selector: '[set-focuser]' // Attribute selector }) export class SetFocuser { constructor(private renderer: Renderer, private elementRef: ElementRef, public keyboard: Keyboard) { } ngAfterViewInit() { const element = this.elementRef.nativeElement.querySelector('input'); // to delay setTimeout(() => { this.renderer.invokeElementMethod(element, 'focus', []); this.keyboard.show(); }, 500); } } .html
<ion-input set-focuser type="text"></ion-input> app.module.ts
import { SetFocuser } from "../components/set-focuser/set-focuser"; @NgModule({ declarations: [ SetFocuser, ], Issues on your package.json
You have to remove
"ionic-native": "2.2.11",module.Use
"@ionic/app-scripts": "1.1.4",instead of"@ionic/app-scripts": "1.0.0",After the above changes run
npm i
This is the official package.json file.
Answers 3
If you want to control your keyboard programatically, then add the Ionic keyboard plugin
If you just want autofocus, add this Angular 2 dependency.
You could try binding one action to trigger the other (focus => open keyboard).
Try also testing your code on your desktop to see how autofocus reacts.
Answers 4
You can try simple method.
<div ng-init="getfocus()"> <ion-input id="myAnchor" type="text" placeholder="Write Your Comments"/> </div> In js file call a function with ng-init
function getfocus() { document.getElementById("myAnchor").focus(); } Hope this code will help you.if you get any error please comment.
0 comments:
Post a Comment