javascript - 警报栏而不是警报框

Question

我现在有一个脚本可以防止用户在我的表单的州字段中输入州缩写以外的任何内容。感谢gideon

我稍微修改了脚本以在进入无效状态时包含一条警告消息。但我真的不喜欢它。我想要一个在页面顶部或字段正下方闪烁的警告栏。输入错误的缩写时会自动出现并闪烁以引起用户注意并在几秒钟后消失的东西。欢迎任何想法或想法!我非常愿意接受建议!再次感谢!

我开始觉得你们不理解我。这是我的代码:

<script>
                        function validateState(el) {
                        //put all states in this array. 
                        var states =    ["AK","AL","AR","AS","AZ","CA","CO","CT","DC","DE",
                    "FL","GA","GU","HI","IA",
                    "ID","IL","IN","KS","KY","LA","MA","MD","ME","MH","MI","MN","MO","MS","MT",
                    "NC","ND","NE","NH","NJ","NM","NV","NY","OH","OK","OR","PA","PR","PW","RI",
                    "SC","SD","TN","TX","UT","VA","VI","VT","WA","WI","WV","WY"];
                        for(var i=0;i< states.length;i++) {
                          if(el.value.toUpperCase() == states[i]) {
                            return true;
                          }
                        }
                        //clear element if it doesn't match a state
                        el.value = ""; //you could maybe do something else here.
                        alert('Invalid State Abbreviation, You must fix this before continuing')
                        document.getElementById("state").focus();
                        return false;
                    }
                    </script>

如果语句返回 false，我希望在屏幕上显示一个栏。

Answer 1

您可以简单地创建一个位于用户 View 上方的元素(顶部:-100px 等)。一旦进入无效状态，您可以使用 jQuery 之类的库将其设置为顶部位置 0 的动画。您可以使用 setInterval() 中的简单条件语句使其闪烁；

我不确定您是否想使用 jQuery，但如果您这样做，您的代码将如下所示:

//if the input is not what you expect..
if(input != state){
    //drop the bar down
    $("#bar").animate({
            top: 0
    }, 1500);//drop it in 1500 milliseconds.
    //this is a lot like a loop that runs every 400 milliseconds.. 
    setInterval(function () {  <-------------------------------| 
        if ($("#bar").css("display") == 'none') {              |
            //if the bar is HIDDEN show it..                   |
            $("#bar").show();                                  |  
        } else {                                               | 
            //else hide it.                                    | 
            $("#bar").hide();                                  |
        }                                                      |
    }, 400);//<< EVERY 400 milli-seconds go here >-------------^
}

当然这只是一个示例，可以很容易地转换回传统的 JavaScript。

查看 jsFiddle .

希望这就是您要找的。