iOS向けの仮想キーボードです。iPadで入力欄と同じ位置にテンキーを表示するために作成しました。iPhoneではうまく動かないと思います。

ui-ios-numerickeybord.js

"use strict";
/**
 * ui-ios-numerickeybord
 * AngularJS 1.6.x向け
 * ディレクティブはポップアップ。クリックするとアラートを表示する。
 * 表示内容は ボタンの data-text の内容。
 * popup-target 属性にアラートボックスのセレクタを指定する(例： popup-target="#alert" )。
 */


var app_module = angular.module('ui-ios-numerickeybord', []);
app_module.directive('uiIosNumerickeybord', ["$compile", function ($compile) {
        return {
            link: function (scope, element, attrs, controller) {


                element.click(function (e) {
                    if (!isiOS()) {
                        return;
                    }

                    scope.numerickeybordTargetElement = element;

                    console.log(scope.numerickeybordTargetElement);

                    var unitType = $(this).attr("data-unit");
                    var dataType = $(this).attr("data-type");
                    var offset = $(this).offset();
                    var top = Math.ceil(offset.top) + 15;
                    var left = Math.ceil(offset.left);
                    var w = $(window).width();
                    var h = $(window).height();
                    var clientY = e.clientY;
                    if ((h / 2) < clientY) { // 384 < 261
                        top = Math.ceil(offset.top) - 325;
                    }
                    var clientX = e.clientX;
                    if (w - 160 < clientX) {
                        left = clientX - 160;
                        if (780 < left) {
                            left = 780;
                        }
                    }
                    //console.log(left);


                    $("#numkey").remove(); //全部削除
                    $(this).blur(); //フォーカスを外す

                    //数値とアルファベットの配列
                    var arr_numeric = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
                    var arr_numeric_tenkey = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', '`'];

                    if (unitType === '00') {
                        arr_numeric.push('円');
                    } else if (unitType === '01') {
                        arr_numeric.push('個');
                    } else {
                        arr_numeric.push('-');
                    }

                    var html = '';
                    html += '  <div class="numkey" id="numkey">';
                    html += '    <ul style="text-align:left;padding: 5px;">';
                    for (var i = 0; i < arr_numeric.length; i++) {
                        html += '      <li id="numerickey' + arr_numeric[i] + '" data-pushbutton=' + arr_numeric[i] + ' class="numerickey" unselectable="on">' + arr_numeric[i] + '</li>';
                    }
                    html += '    </ul>';
                    html += '    <div id="btwrap"><button id="numkeyclose" closebutton class="btn numerickey_button">閉じる</button><button id="numkeyclear" clearbutton class="btn numerickey_button">クリア</button> </div>';
                    html += '  </div>';

//
                    // 要素の追加
                    angular.element("body").append($compile($(html))(scope));
                    scope.$apply();

                    //if (isiOS()) {
                    $("#numkey").css({"top": top, "left": 700});
                    //} else {
                    //    $(".numkey").css({"top": top, "left": left});
                    //}





                    //テンキー以外をクリックしたらテンキーを削除する関数
                    var numkeyHidden = function (event) {
                        if (!$(event.target).closest('#numkey').length) {
                            $("#numkey").remove(); //全部削除
                            $("#numkey").trigger('blur');
                            $(document).off('click touchend', numkeyHidden);
                        }
                    };

                    // 上記関数をクリックとタッチイベントに設定
                    setTimeout(function () {
                        $(document).on('click touchend', numkeyHidden);
                    }, 150);



                });



                function isiOS() {
                    var ua = {};
                    ua.name = window.navigator.userAgent.toLowerCase();

                    ua.isiPhone = ua.name.indexOf('iphone') >= 0;
                    ua.isiPod = ua.name.indexOf('ipod') >= 0;
                    ua.isiPad = ua.name.indexOf('ipad') >= 0;
                    ua.isiOS = (ua.isiPhone || ua.isiPod || ua.isiPad);

                    if (ua.isiOS) {
                        return true;
                    }
                    return false;
                }
            }
        };

    }]);

app_module.directive("pushbutton", function () {
    return function (scope, element, attrs) {
        element.bind("click", function () {
            //console.log(attrs.pushbutton);
            //console.log(scope.numerickeybordTargetElement);
            //.val() = scope.numerickeybordTargetElement.val() + attrs.pushbutton;
            var val = scope.numerickeybordTargetElement.val();
            var type = $(scope.numerickeybordTargetElement).attr('data-type'); //入力タイプ 
            var maxlength = scope.numerickeybordTargetElement.attr('maxlength');
            if (maxlength === undefined || scope.numerickeybordTargetElement.val().length < maxlength) {
                if (type === 'string') {
                    scope.numerickeybordTargetElement.val(String(val) + String(attrs.pushbutton));
                } else {
                    scope.numerickeybordTargetElement.val(parseInt(val + attrs.pushbutton));
                }
            }
            $(scope.numerickeybordTargetElement).trigger('input');
            $(scope.numerickeybordTargetElement).trigger('blur');
        });
    };
});

app_module.directive("closebutton", function () {
    return function (scope, element, attrs) {
        element.bind("click", function () {
            $("#numkey").remove(); //全部削除
            $("#numkey").trigger('blur');
        });
    };
});

app_module.directive("clearbutton", function () {
    return function (scope, element, attrs) {
        element.bind("click", function () {
            scope.numerickeybordTargetElement.val("");
            $(scope.numerickeybordTargetElement).trigger('input');
            $(scope.numerickeybordTargetElement).trigger('blur');
        });
    };
});

テンキーをきれいに表示するにはCSSも必要です。以下サンプル。

.numkey{
	overflow: hidden;
	border: 1px solid #DDDDDD;
	width: 213px;
	background-color: #EBEBEB;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	color: #4D4D4D;
	text-shadow: 1px 1px 0px #FFFFFF;
	font-weight: bold;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index:999;
}

.numkey ul li{
  background:#FFFFFF;
  float: left;
  list-style: none;
  width: 65px;
  height: 65px;
  line-height:61px;
  font-size: 30px;
  border: 1px solid #DDDDDD;
  margin: 1px;
  text-align:center;
  cursor:pointer;
  border-radius: 5px;         
  -moz-border-radius: 5px;    
  -webkit-border-radius: 5px; 
  background:linear-gradient(#FFFFFF, #C9C9C9);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#FFFFFF, endcolorstr=#C9C9C9);
  -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#FFFFFF, endcolorstr=#C9C9C9))";
  zoom: 1;
  background: -moz-linear-gradient(top, #FFFFFF, #C9C9C9);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#C9C9C9));
  user-select: none; 
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;

  
}
.numkey ul li:hover{
  background:linear-gradient(#C9C9C9, #FFFFFF);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#C9C9C9, endcolorstr=#FFFFFF);
  -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#C9C9C9, endcolorstr=#FFFFFF))";
  zoom: 1;
  background: -moz-linear-gradient(top, #C9C9C9, #FFFFFF);
  background: -webkit-gradient(linear, left top, left bottom, from(#C9C9C9), to(#FFFFFF));
}

.numkey ul li span{
	font-size:12px;
}

.numkey #btwrap{
	clear:both;
	padding:10px;
	text-align:center;
}

.numkey #btwrap button{
  border: 1px solid #DDDDDD;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;         
  -moz-border-radius: 5px;    
  -webkit-border-radius: 5px; 
  background:linear-gradient(#FFFFFF, #C9C9C9);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#FFFFFF, endcolorstr=#C9C9C9);
  -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#FFFFFF, endcolorstr=#C9C9C9))";
  zoom: 1;
  background: -moz-linear-gradient(top, #FFFFFF, #C9C9C9);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#C9C9C9));
  color:#4D4D4D;
  text-decoration:none;
}
.numkey #btwrap button:hover{
  background:linear-gradient(#C9C9C9, #FFFFFF);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#C9C9C9, endcolorstr=#FFFFFF);
  -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#C9C9C9, endcolorstr=#FFFFFF))";
  zoom: 1;
  background: -moz-linear-gradient(top, #C9C9C9, #FFFFFF);
  background: -webkit-gradient(linear, left top, left bottom, from(#C9C9C9), to(#FFFFFF));
}