外框醒目提示

最新推荐文章于 2021-06-18 22:18:07 发布

吉普赛的歌

最新推荐文章于 2021-06-18 22:18:07 发布

阅读量1.3k

点赞数

分类专栏： # jQuery插件文章标签： function character border jquery button xhtml

本文链接：https://blog.csdn.net/yenange/article/details/7179543

版权

jQuery插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
    //=====================================================================  
    //插件名称: myunwrap    
    //作    者: yenange  
    //功能说明: 为元素去除父节点。jquery.1.3.2中无此函数，特此补之。  
    //输入参数:  
    //调用示例: $("#id").myunwrap();  
    //输出参数:  
    //创建日期: 2012-01-05  
    $.fn.myunwrap = function () {
        return this.parent().each(function () {
            if (!jQuery.nodeName(this, "body")) {
                jQuery(this).replaceWith(this.childNodes);
            }
        }).end();
    }
    //=====================================================================  
    //插件名称: SuperFocus    
    //作    者: yenange  
    //功能说明: 将元素加醒目外框，几秒后消失。用以醒目提示。  
    //输入参数:  
    //调用示例: $("#id").SuperFocus();  $obj.SuperFocus("border:20px solid green",5000);  
    //输出参数:  
    //创建日期: 2012-01-05  
    $.fn.SuperFocus = function (borderStyle, milliseconds) {
        if (typeof (borderStyle) == "undefined" || $.trim(borderStyle) == "") {
            borderStyle = "border:3px solid red;";
        }
        if (typeof (milliseconds) == "undefined") {
            milliseconds = 3000;
        }
        this.wrap("<div style='" + borderStyle + ";display:inline-block;'></div>");
        var jqObj = this;
        setTimeout(function () {
            jqObj.myunwrap();
            var obj = jqObj[0]; //下面的操作其实就是focus,但$obj.focus()在IE下似乎是无用的，so that。  
            if (obj.setSelectionRange) {
                setTimeout(function () {
                    obj.setSelectionRange(0, 0);
                    obj.focus();
                }, 100);
            } else {
                if (obj.createTextRange) {
                    var range = obj.createTextRange();
                    range.collapse(true);
                    range.moveEnd("character", 0);
                    range.moveStart("character", 0);
                    range.select();
                }
                try {
                    setTimeout(function () {
                        obj.focus();
                    }, 100);
                } catch (e) { }
            }
        }, milliseconds);
    };
})(jQuery);  
</script>
    <script type="text/javascript">
        function test() {
            $obj=$("#Text1");
            if ($.trim($obj.val()) == "") {
                alert("此字段不得为空！");
                $obj.SuperFocus();
                //$obj.SuperFocus("border:20px solid green",5000);
            }
        }
    </script>
</head>
<body>
    请输入姓名:<input id="Text1" type="text" value="" />
    <input id="Button1" type="button" value="测试" οnclick="test()" />
</body>
</html>