Skip to content
InfinityKnow

InfinityKnow

Infinity Knowledge (IK) : Technology, Articles, Topics, Facts or many More.

  • Home
  • Education
    • yttags
    • Make Money
    • Jobs
    • Programming
      • Technology
      • Web Design
      • WEB HOSTING
      • Interview
  • Entertainment
    • pakainfo
    • Sports
    • Tips and Tricks
      • Law
      • Photography
      • Travel
  • Health
    • Insurance
    • Lifestyle
      • Clothing
      • Fashion
      • Food
  • News
    • Insurance
      • Auto Car Insurance
      • Business Insurance
    • Donate
    • California
  • News
    • Political
  • Home Improvement
  • Trading
    • Marketing
    • Top Tranding
    • Business
    • Real Estate
  • Full Form
  • Contact Us
  • Famous quotes Quotes
  • HTML5 Vuejs Based Audio Player Application
    Moviesrush 2021 : Latest Hollywood Hindi Dubbed & Animated Movies Download Website Movies
  • Get Radio Button value using jQuery Technology
  • AngularJs Tables using ng repeat From JSON
    AngularJs Tables using ng repeat From JSON Technology
  • Style Vintage Outfits
    Best Tips to Style Vintage Outfits Tips and Tricks
  • Laravel 6 Get Current User Example Technology
  • vue js get current date time
    Vue Js Get Current Date Time Example Technology
  • abstract painting
    What is an abstract painting ? Jobs

Angular ng-focus Directive Set Focus on Textbox

Posted on July 15, 2019 By admin No Comments on Angular ng-focus Directive Set Focus on Textbox

Angular ng-focus Directive Set Focus on Textbox

Today, We want to share with you Angular ng-focus Directive Set Focus on Textbox.
In this post we will show you AngularJs Set Focus on Input Field Example, hear for angular set focus on input field we will give you demo and example for implement.
In this post, we will learn about Automatically Set Focus on a Textbox (Input Box) in AngularJS with an example.

ngFocus : Example – Set Focus [input, select, textarea, a,etc…]

AngularJs Set Focus on Input Field

It is a Specify custom behavior on focus event.Like (input, select, textarea, a,etc..)

Directive:

[php]
app.directive(‘inputFocusFunction’, function () {
‘use strict’;
return {
restrict: ‘A’,
link: function (scope, element, attr) {
scope[attr.inputFocusFunction] = function () {
element[0].focus();
};
}
};
});
[/php]

READ :  Vuejs Simple Navigation Menu vue router-link params

html code

[php]


[/php]

controller

[php]
$scope.focusOnSaveInput();
[/php]

Angular Set Focus on Input Field

html code

[php]
Your Good Name:


Solution of AngularJs All Problems For infinityknow.com

My First Web-Application in angularjs, So I am very happy and 1000+ more then people are used of infinityknow.com

[/php]

Directive:

[php]
app.directive(‘focusMe’, function($timeout, $parse) {
return {
//scope: true or false,
// simple optionally create a new child scope in angular
link: function(scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function(value) {
if(value === true) {
$timeout(function() {
element[0].focus();
});
}
});
// simple on blur event in agularjs:
element.bind(‘blur’, function() {
scope.$apply(model.assign(scope, false));
});
}
};
});
[/php]

Angular js auto focus for input box

[php]

Auto Focus :

With Out Focus :

Auto Focus :

script

// simple Common directive used to for Focus

angular.module(‘infinityknowApp’).directive(‘focus’,
function($timeout) {
return {
scope : {
trigger : ‘@focus’
},
link : function(scope, element) {
scope.$watch(‘trigger’, function(value) {
if (value === “true”) {
$timeout(function() {
element[0].focus();
});
}
});
}
};
});
[/php]

Here is a working example:

Set-focus – Example

Set-focus – Example – 2

Related posts:

  1. Vuejs set focus Textbox Components
  2. Angular ng model Directive Example
  3. Angular ng bind directive Example
  4. Vuejs Simple Navigation Menu vue router-link params
Technology, AngularJs Tags:angular 2 focus input, angular 4 focus input, angular 4 set focus, angular 6 focus input from controller, angular 6 focus input onload, angular 6 set focus on div, angular 6 set focus on textbox, angular set focus on click

Post navigation

Previous Post: VueJs dynamic table rows – Add and Delete Rows dynamically using VueJs
Next Post: Angularjs Dynamic Dropdown Menu using json

Related Posts

  • Vuejs Add Remove Class to Active Element
    Vuejs Add Remove Class to Active Element Technology
  • A1 A2 A3 A4 A5 Paper Size in inches mm cm and meters pixels Technology
  • Ignore duplicate record on insert using Laravel 6 Technology
  • Simple Way Laravel Installation step by step using composer
    Simple Way Laravel Installation step by step using composer Technology
  • PHP Application URL Routing Removing file extensions
    PHP Application URL Routing Removing file extensions Technology
  • Flowroute SMS API using Yii 1 with PHP
    Flowroute SMS API using Yii 1 with PHP Technology

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Account web hosting (1)
  • AngularJs (277)
  • Articles (143)
  • Asp.Net (49)
  • Astrology (2)
  • Attorney (7)
  • Auto Car Insurance (4)
  • Biography (2)
  • Business (9)
  • Business Insurance (3)
  • California (4)
  • Choose the web hosting (1)
  • Clothing (6)
  • cloud (8)
  • Cloud data storage (2)
  • Credit (1)
  • Dedicated hosting server web (1)
  • Dedicated server web hosting (1)
  • Dedicated web hosting (1)
  • Degree (11)
  • Design (9)
  • Differences shared hosting (1)
  • Donate (2)
  • Education (37)
  • Energy web hosting (1)
  • Entertainment (6)
  • Facts (12)
  • Fashion (3)
  • Finance (3)
  • Food (5)
  • full form (90)
  • Google Adsense (22)
  • Health (20)
  • Home Improvement (5)
  • Insurance (6)
  • Interview (2)
  • Jobs (6)
  • jquery (2)
  • jQuery (2)
  • Laravel (164)
  • Lawyer (4)
  • Lifestyle (6)
  • Loans (6)
  • Make Money (31)
  • Managed dedicated server (1)
  • Managed hosting solution (1)
  • Managed servers (1)
  • Marketing (8)
  • Mortgage (2)
  • Movies (21)
  • MySQL (180)
  • News (5)
  • Photography (1)
  • PHP (250)
  • Programming (18)
  • Quotes (75)
  • Real Estate (2)
  • SEO (9)
  • Shared web hosting (1)
  • Shayari (67)
  • Sports (5)
  • Status (34)
  • Stories (45)
  • suvichar (8)
  • Tech (3)
  • Technology (675)
  • Tips and Tricks (42)
  • Top Tranding (35)
  • Trading (28)
  • Travel (12)
  • Uncategorized (8)
  • VueJs (179)
  • Web Design (2)
  • WEB HOSTING (1)
  • Web hosting company (1)
  • Web hosting really (1)
  • Web hosting windows (1)
  • Which website hosting (1)
  • Wishes (13)
  • wordpress (15)

Categories

AngularJs (277) Articles (143) Asp.Net (49) Attorney (7) Business (9) Clothing (6) cloud (8) Degree (11) Design (9) Education (37) Entertainment (6) Facts (12) Food (5) full form (90) Google Adsense (22) Health (20) Home Improvement (5) Insurance (6) Jobs (6) Laravel (164) Lifestyle (6) Loans (6) Make Money (31) Marketing (8) Movies (21) MySQL (180) News (5) PHP (250) Programming (18) Quotes (75) SEO (9) Shayari (67) Sports (5) Status (34) Stories (45) suvichar (8) Technology (675) Tips and Tricks (42) Top Tranding (35) Trading (28) Travel (12) Uncategorized (8) VueJs (179) Wishes (13) wordpress (15)
  • Country State City Cascading DropDown list using VueJS
    Country State City Cascading DropDown list using VueJS Technology
  • Angular Application Folder Structure Technology
  • Retrieve a webhook using PHP WooCommerce Rest Api Technology
  • Packaging May Benefit Your Business
    How Retail Packaging May Benefit Your Business – Solutions for Something Different Articles
  • Love shayari hindi Shayari
  • Angular Adding Table New Rows Dynamically Technology
  • Angular 6 PHP CRUD (Create, Read, Update, Delete) Operations
    Angular 6 PHP CRUD (Create, Read, Update, Delete) Operations Technology
  • tongue twisters
    Tongue Twisters in hindi Entertainment

Copyright © 2022 InfinityKnow.

Powered by PressBook News WordPress theme