Skip to content

Instantly share code, notes, and snippets.

@zuzu
Created September 28, 2017 05:07
Show Gist options
  • Save zuzu/25f1dc31474e8f7cad4f3b931e2667b3 to your computer and use it in GitHub Desktop.
Save zuzu/25f1dc31474e8f7cad4f3b931e2667b3 to your computer and use it in GitHub Desktop.
iOS向けの仮想キーボードです。iPadで入力欄と同じ位置にテンキーを表示するために作成しました。iPhoneではうまく動かないと思います。
"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');
});
};
});
@zuzu
Copy link
Author

zuzu commented Sep 28, 2017

テンキーをきれいに表示するには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));
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment