{"id":9916,"date":"2022-09-21T09:29:11","date_gmt":"2022-09-21T03:59:11","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/"},"modified":"2022-09-21T09:29:11","modified_gmt":"2022-09-21T03:59:11","slug":"solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/","title":{"rendered":"[Solved] How to set focus on an input that works on IOS supporting devices?"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

You can use the following:<\/p>\n

@Component({\n  selector: 'my-app',\n  template: `\n    <div *ngFor=\"let item of [1,2,3,4]; let i = index\">\n      <button type=\"button\" (click)=\"display(i)\">Click to show and set focus<\/button>\n      <input #theInput *ngIf=\"show === i\" type=\"text\" >\n    <\/div>\n  `,\n})\nexport class App {\n  show = -1; \n\n  @ViewChild('theInput')\n  private theInput;\n\n  constructor() {\n  }\n\n  display(i) {\n    this.show = i;\n    setTimeout(() => this.theInput.nativeElement.focus(), 0);\n  }\n}\n<\/code><\/pre>\n
I’m not sure if there is something more elegant than the usage of setTimeout, but since the input is only added to the DOM after the change detection which is triggered by the change of show<\/code>, theInput<\/code> is undefined (or the previously shown input) at that time.<\/p>\n
Demo: http:\/\/plnkr.co\/edit\/A0ZO0hyuR61nUdiSvzFj?p=preview<\/a><\/p>\n
Edit:<\/p>\n
It turns out there is something more elegant: AfterViewChecked:<\/p>\n
export class App {\n  show = -1; \n  shouldFocus = false;\n\n  @ViewChild('theInput')\n  private theInput;\n\n  constructor() {\n  }\n\n  display(i) {\n    this.show = i;\n    this.shouldFocus = true;\n  }\n\n  ngAfterViewChecked() {\n    if (this.shouldFocus) {\n      this.theInput.nativeElement.focus();\n      this.shouldFocus = false;\n    }\n  }\n}\n<\/code><\/pre>\n
See the updated demo: http:\/\/plnkr.co\/edit\/lXTRDGLKwkAAukEQGQjq?p=preview<\/a><\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            3<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved How to set focus on an input that works on IOS supporting devices? <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] You can use the following: @Component({ selector: ‘my-app’, template: ` <div *ngFor=”let item of [1,2,3,4]; let i = index”> <button type=”button” (click)=”display(i)”>Click to show and set focus<\/button> <input #theInput *ngIf=”show === i” type=”text” > <\/div> `, }) export class App { show = -1; @ViewChild(‘theInput’) private theInput; constructor() { } display(i) { this.show = … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[732,1075,471,333,651],"class_list":["post-9916","post","type-post","status-publish","format-standard","hentry","category-solved","tag-angular","tag-focus","tag-ios","tag-javascript","tag-typescript"],"yoast_head":"\n[Solved] How to set focus on an input that works on IOS supporting devices? - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How to set focus on an input that works on IOS supporting devices? - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] You can use the following: @Component({ selector: 'my-app', template: ` <div *ngFor="let item of [1,2,3,4]; let i = index"> <button type="button" (click)="display(i)">Click to show and set focus<\/button> <input #theInput *ngIf="show === i" type="text" > <\/div> `, }) export class App { show = -1; @ViewChild('theInput') private theInput; constructor() { } display(i) { this.show = ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-21T03:59:11+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How to set focus on an input that works on IOS supporting devices?\",\"datePublished\":\"2022-09-21T03:59:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/\"},\"wordCount\":113,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"angular\",\"focus\",\"ios\",\"javascript\",\"typescript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/\",\"name\":\"[Solved] How to set focus on an input that works on IOS supporting devices? - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-09-21T03:59:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How to set focus on an input that works on IOS supporting devices?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How to set focus on an input that works on IOS supporting devices? - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How to set focus on an input that works on IOS supporting devices? - JassWeb","og_description":"[ad_1] You can use the following: @Component({ selector: 'my-app', template: ` <div *ngFor=\"let item of [1,2,3,4]; let i = index\"> <button type=\"button\" (click)=\"display(i)\">Click to show and set focus<\/button> <input #theInput *ngIf=\"show === i\" type=\"text\" > <\/div> `, }) export class App { show = -1; @ViewChild('theInput') private theInput; constructor() { } display(i) { this.show = ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/","og_site_name":"JassWeb","article_published_time":"2022-09-21T03:59:11+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How to set focus on an input that works on IOS supporting devices?","datePublished":"2022-09-21T03:59:11+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/"},"wordCount":113,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["angular","focus","ios","javascript","typescript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/","name":"[Solved] How to set focus on an input that works on IOS supporting devices? - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-21T03:59:11+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-set-focus-on-an-input-that-works-on-ios-supporting-devices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How to set focus on an input that works on IOS supporting devices?"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/9916","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=9916"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/9916\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=9916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=9916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=9916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}