Jan 222016
 

Text Event Focus AngularJs

Assalamu’alaikum wr wb

Setelah beberapa saat tidak menulis artikel dan kemaren sekedar copas dari website lain, kali ini saya akan berbagi tutorial tentang AngularJs, Bagaimana cara membuat directive pada angularjs yang tujuannya saat kita menekan tombol pada keybord akan membuat text langsung berpindah ke text selanjutnya.

Biasanya perintah ini kalau dalam pemrograman visual kita akan menambahkan event onKeyPress pada object textbox, sekarang kita akan membuat sebuah Text Object pada input text.

Berikut adalah source yang dapat kita pakai.

var doeventInput = angular.module('deFocus', []);
doeventInput.directive('deFocus', function () {
 return {
 restrict: 'A',
 link: function(scope, elem, attrs) {
 var frm = angular.element('.form-horizontal');
 elem.bind('keyup', function (e) {
 var atoms = frm.find('input, select');
 toAtom = null;
 for (var i = atoms.length - 1; i >= 0; i--) {
 if (atoms[i] === e.target) {
 //console.log(elem[0].localName);

 if (e.keyCode === 38 && elem[0].localName != 'select') {
 toAtom = atoms[i - 1];
 break;
 /*} else if (e.keyCode === 40 && elem[0].localName != 'select') {
 toAtom = atoms[i + 1];
 break;*/
 } else if (e.keyCode === 13) { //Enter
 toAtom = atoms[i + 1];
 break;
 } /*else if (e.keyCode === 9) { //Tab
 toAtom = atoms[i + 1];
 break;
 }*/
 }
 }

 if (toAtom) toAtom.focus();
 return false;
 
 });
 }
 }
});

Untuk penggunaaannay yang pertama tambahkan source dalam app kamu

var app = angular.module(‘NamaApp’,[‘deFocus’]);

Untuk menggunakan dalam object input text dapat melihat contoh

<input de-focus required type=”text”   ng-model=”model”>

Selamat mencoba

Wassalamu’alaikum wr wb

Facebook Comments

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)