Javascript边框闪烁提示

当我们提交表单的时候,有些字段是必填的。

但是如果用户提交的时候偏偏不填写就提交,这时我们一般都会弹出一个框来提醒用户。

但是有些小伙伴并不喜欢使用弹窗,觉得用户体验不好。

今天就有小伙伴问小编,有没有方法实现边框闪烁,以此来提醒用户。

讲真,javascript、jquery感觉就是万能的,就像没有什么实现不了的一样。

所以这个问题是肯定的,方法肯定有。

今天小编就分享Javascript实现边框闪烁的实例。

<style>  
.selectshake{ border:1px solid #d00; background:#ffe9e8; color:#d00;}  
</style>  
<p>js边框闪烁</p>  
<input type="text" id="keytxt" value="" placeholder="请输入内容" />  
<input type="button" id="btn" value="提交" />  
<script>  
function shake(ele,cls,times){//边框闪烁  
    var i = 0,t= false ,o =ele.attr("class")+" ",c ="",times=times||2;  
    if(t) return;  
    t= setInterval(function(){  
        i++;  
        c = i%2 ? o+cls : o;  
        ele.attr("class",c);  
        if(i==2*times){  
            clearInterval(t);  
            ele.removeClass(cls);  
        }  
    },200);  
};  
$("#btn").click(function(){  
    if ($.trim($("#keytxt").val())==''){  
        $("#keytxt").attr("placeholder","请输入内容");  
        $("#keytxt").focus();  
        shake($("#keytxt"),"selectshake",4);  
        return false;  
    }else{  
        alert('成功提交');  
    }  
});  
</script> 

以上代码的功能就是,当用户点击提交按钮的时候,如果文本框里面不输入信息,则无法提交。

而且使文本框闪烁,用显眼的方式来提醒用户,这个地方是必须填写的。

posted @ 2017-10-13 10:17  名字有点长  阅读(413)  评论(0编辑  收藏  举报