怎么在angularjs中利用directive在移动端自定义一个软键盘-成都快上网建站

怎么在angularjs中利用directive在移动端自定义一个软键盘

怎么在angularjs中利用directive在移动端自定义一个软键盘？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

创新互联专业为企业提供旌阳网站建设、旌阳做网站、旌阳网站设计、旌阳网站制作等企业网站建设、网页设计与制作、旌阳企业网站模板建站服务，10余年旌阳做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

自定义的directive如下：

angular.module('ng-calculator', []).directive('calculator', ['$compile',function($compile) {
  return {
    restrict : 'A',
    replace : true,
    transclude : true,
    template:'',

    link : function(scope, element, attrs) {
      var keylist=[1,2,3,4,5,6,7,8,9,0,'.'];
      var calculator = '

' +'' +''+attrs.title+'

' +'' +'

' +''; $.each(keylist,function(k,v){ calculator += ''+v+'

'; }); calculator += '

' +'' +'' +'清空' +'确
定' +'' +'' +'' +''; 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(); }); //关闭模态框 $(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(); }); //退格 $(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'); }); //清空 $(calculator[0]).find(".cleanup").click(function(){ $(calculator[0]).find("input").val("").trigger('change'); }); //点击数字 $(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'); }); //确认 $(calculator[0]).find(".ensure").click(function(){ calculator[0].remove(); var callback = attrs.callback; if(typeof callback!="undefined"){ scope[callback](); } }); //点击效果 $(calculator[0]).find(".keyboard").click(function(){ $(this).addClass("keydown"); var that = 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); } }; }]);

dom中调用如下：

可以看到只是定义了一个 calculator 属性，然后在dom中只需要加入 calculator 即可使用软键盘。

我的软键盘亮点：
1、calculator 调用的时候表单获取焦点，有人会问移动端设备在获取到焦点的时候会弹出软键盘，那岂不是会出来两个键盘呢？实际不然，directive中对此做了处理：

怎么在angularjs中利用directive在移动端自定义一个软键盘

即在获取到焦点的同事失去焦点，这样就能完美的避免设备自带的键盘。

2、数字键盘中的数据和页面的表单中的数据实时联动起来是通过ng-model实现的，在获取焦点的时候directive中会获取到ng-model的值并赋给页面中的表单，这样就能实现数据联动起来，让软键盘更加完美，可参考第一张图。

3、为了让软键盘点击的时候更加逼真，在自定义的directive中对按钮元素进行了处理，当点击按钮的时候给当前被点击的元素添加一个class，效果带阴影效果的按钮往下移动了几像素，看起来有点击的效果，产品和UI没有给我这个需求，是我自己自由发挥的，哈哈。

怎么在angularjs中利用directive在移动端自定义一个软键盘

4、在项目中用到自定义的这个软键盘的时候有些需要在点击键盘的确定按钮之后需要进行一些数据处理，于是后来在directive的确定安妮中中加了一个回调，我们可以在点击确定之后调用这个回调，可以达到确定数字之后紧接着自动去执行需要执行的事件。只需要在dom中加上callback="functionItem()"即可。

怎么在angularjs中利用directive在移动端自定义一个软键盘

当然如果是英文字母的话也可以用这种方法，只需要在初始的数组中写上英文字母布局排好即可，异曲同工而已。

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。

当前名称：怎么在angularjs中利用directive在移动端自定义一个软键盘
文章网址：http://kswjz.com/article/jcpogc.html

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯