资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

怎么在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://cdkjz.cn/article/jcpogc.html
返回首页 了解更多建站资讯

相关资讯

十二年 建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求

关于快上网

+

我们是成立于2007年的成都网站建设公司,设有成都分公司,提供高品质网站建设,电商网站设计开发,外贸网站制作,响应式网页设计,微信小程序等服务.我们的目标是将快上网打造成网站品牌策划、网站品牌形象设计、网络营销传播行业的国际型企业！为客户创造有价值的品牌营销体验，让互联网提升企业的竞争力！

我们的优势

12年建站服务经验

服务27家500强企业

服务136家上市企业

服务行业龙头超过70家

设有成都和成都网站建设公司

多项网站设计传播大奖

营销型网站建设专家

完备的项目流程管理体系

B2C电商网站建设供应商

网页设计与网站开发技术并重

我们的不同

+

作为一家集“创意+整合+营销”的互联网整合营销机构，我们在业内具有深远的设计影响力和良好的客户口碑。我们提供从前期的网站品牌分析策划、网站设计、创意表现、系统开发以及后续网站运营反馈建议等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,创造更大的品牌势能！

友情链接 交换友情链接
网页设计成都网站优化腾讯云香港虚拟主机成都富士康招工成都网站建设解决方案西云主机托管双流能亿建站成都网站建设成都小程序开发

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图