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> 

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

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

  • 相关阅读:
    P2523 [HAOI2011]Problem c
    P2518 [HAOI2010]计数
    P2513 [HAOI2009]逆序对数列
    P2519 [HAOI2011]problem a
    P5020 货币系统
    P2580 于是他错误的点名开始了(Trie)
    P3805 【模板】manacher算法
    基础
    白兔的字符串(hash入门)
    ACM的分类训练题集(转载)
  • 原文地址:https://www.cnblogs.com/startend/p/7659786.html
Copyright © 2011-2022 走看看