当我们提交表单的时候,有些字段是必填的。
但是如果用户提交的时候偏偏不填写就提交,这时我们一般都会弹出一个框来提醒用户。
但是有些小伙伴并不喜欢使用弹窗,觉得用户体验不好。
今天就有小伙伴问小编,有没有方法实现边框闪烁,以此来提醒用户。
讲真,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>
以上代码的功能就是,当用户点击提交按钮的时候,如果文本框里面不输入信息,则无法提交。
而且使文本框闪烁,用显眼的方式来提醒用户,这个地方是必须填写的。