移動端輸入框只有輸入文本後才能點擊效果

標籤：

現在手機端的提交按鈕很多都是在輸入內容後才能提交的，

這是沒有輸入文本時的效果，當然 下一步 按鈕也是不可點擊的

這個是是輸入文本後的效果，可以進行下一步的操作

這樣做對資料提交的正確性有一定的保護，同時也增加了使用者體驗。其實實現這樣的效果邏輯很簡單。代碼如下：

    /*如果輸入內容就給提交按鈕添加樣式並且添加跳轉連結*/            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();            })

邏輯很簡單，效果很實用希望可以協助到大家.

 

移動端輸入框只有輸入文本後才能點擊效果