zoukankan      html  css  js  c++  java
  • 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> 

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

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

  • 相关阅读:
    Django框架简介
    前端之Bootstrap
    前端之JQuery
    前端之BOM和DOM
    前端知识之js
    前端知识之CSS
    假期学习总结2-10
    假期学习总结2-9
    假期学习总结2-8
    假期学习总结2-7
  • 原文地址:https://www.cnblogs.com/startend/p/7659786.html
Copyright © 2011-2022 走看看