Front-end Angularjs the method of using directive to realize the mobile custom soft keyboard

Recent company project requirements on our ipad project on some need to enter a number of places with our custom soft keyboard and not mobile device comes with the keyboard, just received a little bit of a confused, because did not have done before, and then a bit of thought to find this thing is that. Let's look at the results after the implementation:

The effect is that when you click on the page needs to pop the soft keyboard pop-up, floating in the middle of the page, and modal box effect, you can enter any number in the soft keyboard, with the function of the decimal point, backspace, empty, determine and other functions. When you click on the number on the keyboard, the form in the page will add the corresponding number in real-time, and you can see it.

Product Manager over the reason is that the ipad screen is small, if the soft keyboard pop-up will occupy half of the screen, affecting the appearance of the product, but only to find a way to fix.

Custom soft Keyboard Use ANGULARJS Directive custom instructions to do, ANGULARJS directive here do not explain, if not clear can go to angular official website to see. With a custom property (restrict: ' a '), so that after the package is needed to use the soft keyboard only need to add a custom property in <input> to bring up the soft keyboard, the use of it is very simple, the custom directive as follows:

Angular.module (' Ng-calculator ', []). Directive (' Calculator ', [' $compile ', function ($compile) {
return {
Restrict: ' A ',
Replace:true,
Transclude:true,
Template: ' <input/> ',

Link:function (scope, element, Attrs) {
var keylist=[1,2,3,4,5,6,7,8,9,0, '. '];
var calculator = ' <div class= ' ngcalculator_area ' ><div class= ' bg ' ></div> '
+ ' <div class= ' calculator ' > '
+ ' <div class= ' title close > ' +attrs.title+ ' </div><div class= ' inputarea ' > '
+ ' <input type= ' text "id=" text "ng-tap=" GetInput () "class=" ' +attrs.class+ ' "ng-model=" ' +attrs.ngmodel+ ' ">"
+ ' </div><div class= ' con ' > '
+ ' <div class= ' left ' > ';
$.each (Keylist,function (k,v) {
Calculator + = ' <div class= "keyboard num" value= "' +v+ '" > ' +v+ ' </div> ';
});

Calculator + = ' </div> '
+ ' <div class= ' right > '
+ ' <div class= ' keyboard blueicon backstep ' ></div> '
+ ' <div class= ' keyboard blueicon cleanup ' > Empty </div> '
+ ' <div class= "keyboard ensure ensure" > <br> set </div> '
+ ' </div> '
+ ' </div> '
+ ' </div> '
+ ' </div> ';
Calculator = $compile (Calculator) (scope);
Element.bind (' Focus ', function () {
Document.body.appendChild (Calculator[0]);
Document.activeElement.blur ();
});

$ (calculator[0]). Find ("input"). focus (function () {
Document.activeElement.blur ();
});
Close Modal Box
$ (calculator[0]). Find (". Close"). Click (function () {
Calculator[0].remove ();
var callback = Attrs.callback;
if (typeof callback!= "undefined") {
Scope[callback] ();
}
});
$ (calculator[0]). Find (". BG"). Click (function () {
Calculator[0].remove ();
});
Backspace
$ (calculator[0]). Find (". Backstep"). Click (function () {
if (typeof $ (calculator[0]). Find ("Input"). val () = = "undefined") {
$ (calculator[0]). Find ("Input"). Val ("");
}
$ (calculator[0]). Find ("Input"). Val ($ (calculator[0]). Find ("Input"). val (). substring (0,$ (calculator[0]). Find (" Input "). Val (). length-1). Trigger (' change ');
});
Empty
$ (calculator[0]). Find (". Cleanup"). Click (function () {
$ (calculator[0]). Find ("Input"). Val (""). Trigger (' change ');
});
Tap numbers
$ (calculator[0]). FIND (". Num"). Click (function () {
var val = $ (calculator[0]). Find ("Input"). Val ();
var filter = Attrs.filter;
if (typeof filter!= "undefined") {
val = Scope[filter] (val,$ (this). attr ("value"));
}else{
val = val+ ' +$ (This). attr ("value");
}
$ (calculator[0]). Find ("Input"). Val (Val). Trigger (' change ');
});
Confirm
$ (calculator[0]). FIND (". ensure"). Click (function () {
Calculator[0].remove ();
var callback = Attrs.callback;
if (typeof callback!= "undefined") {
Scope[callback] ();
}
});
Click Effect
$ (calculator[0]). Find (". Keyboard"). Click (function () {
$ (this). addclass ("KeyDown");
var = this;
SetTimeout (function () {
$ (that). Removeclass ("KeyDown");
},100)
});
var position = {
startx:0,
starty:0
};
Calculator[0].getelementsbyclassname ("title") [0].addeventlistener (' Touchstart ', function (e) {
E.preventdefault ();
var transform = $ (calculator[0]). Find (". Calculator"). CSS ("transform"). Match (/translate\ ((. *), (. *) \)/);
if (transform==null) {
Position.startx = E.targettouches[0].clientx;
Position.starty = E.targettouches[0].clienty;
}else{
Position.startx = E.targettouches[0].clientx-parseint (transform[1]);
Position.starty = E.targettouches[0].clienty-parseint (transform[2]);
}
}, False);
Calculator[0].getelementsbyclassname ("title") [0].addeventlistener (' Touchmove ', function (e) {
E.preventdefault ();
var MoveX = E.targettouches[0].clientx-position.startx;
var movey = E.targettouches[0].clienty-position.starty;
$ (calculator[0]). Find (". Calculator"). CSS ("transform", "Translate (" +movex+ "px," +movey+ "px)");
}, False);
}
};
}]);



The DOM is called as follows:

<input type= "text" placeholder= "Search by Price" ng-model= "Spaandhairseainprice" title= "Search by Price" calculator>

You can see that you just defined a calculator property, and then you only need to join Calculator in the DOM to use the soft keyboard.


Highlights of my soft keyboard:
1, Calculator call when the form gets focus, someone will ask the mobile device in the focus of the time will pop up the soft keyboard, that will not come out two keyboard it? In fact, this was handled in directive:

That is, in the focus of the colleagues lose focus, so that the perfect way to avoid the device's own keyboard.

2, the data in the numeric keypad and the data in the form of the page in real-time linkage is realized through Ng-model, in the focus time directive will get the value of Ng-model and assigned to the form in the page, so that the data can be linked together, so that the soft keyboard more perfect, Refer to the first picture.

3, in order to let the soft keyboard Click More lifelike, in the custom directive button element has been processed, when the button is clicked to add a class to the currently clicked element, the effect with the shadow effect of the button moved down a few pixels, it seems to have a click effect, Product and UI did not give me this demand, is my own free play, haha.

4, in the project to use the custom soft keyboard when some need to click on the keyboard to determine the button after some data processing, so later in Directive's determination of Annie added a callback, we can call this callback after clicking OK, The event that needs to be executed is automatically executed immediately after the number is reached. Just add callback= "Functionitem ()" to the DOM.

Of course, if it is the English alphabet can also use this method, only need to write in the initial array of English letter layout can be, similar.

The above is my simple mobile digital keyboard, I hope to see the people have some help.

If there is a shortage of places also hope that we communicate with each other, if there is a better way also please tell me, as a program ape, I want to code indefinitely optimize my code.

Progress is lost every day.

Front-end Angularjs the method of using directive to realize the mobile custom soft keyboard