Javascript结合CSS实现边框闪烁提示2017-09-01 23:12

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

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

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

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

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

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

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

.selectshake{ border:1px solid #d00; background:#ffe9e8; color:#d00;}

js边框闪烁

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('成功提交');

}

});

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

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

其中用到了placeholder属性，这个属性是提供可描述输入字段预期值的提示信息。相当于是做为可输入字段的默认值一样。