资讯

精准传达 • 有效沟通

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

网站建设 >

查看其它板块

怎么在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
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

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

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

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
自贡主机托管微信小程序乐山托管服务器德阳机房托管手机APP开发网站免费收录手机APP开发联通机房服务器托管南充主机托管网站建设开发

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

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

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