码迷,mamicode.com
首页 > 移动开发 > 详细

移动端输入框只有输入文本后才能点击效果

时间:2016-05-24 20:47:39      阅读:407      评论:0      收藏:0      [点我收藏+]

标签:

现在手机端的提交按钮很多都是在输入内容后才能提交的,如图:

这是没有输入文本时的效果,当然 下一步 按钮也是不可点击的

技术分享

这个是是输入文本后的效果,可以进行下一步的操作

技术分享

这样做对数据提交的正确性有一定的保护,同时也增加了用户体验。其实实现这样的效果逻辑很简单。代码如下:

    /*如果输入内容就给提交按钮添加样式并且添加跳转链接*/
            var btn = $(buttn)
            function judge(){
                var lenght1 = $(#input1).val().length;
                var lenght2 = $(#input2).val().length;
                if(lenght1>0&&lenght2>0){
                    butn.addClass(btnsty).attr(href,index.html);
                }else{
                    btn.removeClass(btnsty).attr(href,‘‘); 
                }
            }
    /*输入框获得焦点后添加定时器对输入框进行监控*/
            var timeINterval;
            btn.on(focus,function() {
                timeINterval = setInterval(function() {
                    judge();
                },100);
            })
      /*输入框失去焦点清除定时器*/
            btn.on(blur,function() {
                clearInterval(timeINterval);
                judge();
            })

逻辑很简单,效果很实用希望可以帮助到大家.

 

移动端输入框只有输入文本后才能点击效果

标签:

原文地址:http://www.cnblogs.com/qujinwei/p/5524640.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!