jQuery中Form相关知识汇总

前端技术 2023/09/03 JavaScript

form中的单行文本获取和失去焦点

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang=\"en\">
    <meta charset=\"UTF-8\">
    <script type=\"text/javascript\" src=\"../../js/jquery-2.1.3.js\"></script>
    <title></title>
    <style type=\"text/css\">
        input:focus, textarea:focus {
            border: 1px solid#f00;
            background: #fcc;
        }
        .focus {
            border: 1px solid#f00;
            background: #fcc;
        }
    </style>
</head>
<body>
<form action=\"#\" method=\"post\" id=\"regForm\">
    <fieldset>
        <legend>个人基本信息</legend>
        <div>
            <label for=\"username\">名称:</label>
            <input id=\"username\" type=\"text\">
        </div>
        <div>
            <label for=\"pass\">密码:</label>
            <input id=\"pass\" type=\"password\">
        </div>
        <div>
            <label for=\"msg\">详细信息:</label>
            <textarea id=\"msg\"></textarea>
        </div>
    </fieldset>
</form>
</body>
<script type=\"text/javascript\">
    /**
     * 1.单行文本框---得到焦点和失去焦点
     * */
    $(function () {
        $(\":input\").focus(function () {
            $(this).addClass(\"focus\");
        }).blur(function () {
            $(this).removeClass(\"focus\");
        })
    })
</script>
</html>

更改多行文本的高度

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang=\"en\">
    <meta charset=\"UTF-8\">
    <script type=\"text/javascript\" src=\"../../js/jquery-2.1.3.js\"></script>
    <title></title>
    <style type=\"text/css\">
        * { margin:0; padding:0;font:normal 12px/17px Arial; }
        .msg {width:300px; margin:100px; }
        .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}
        .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; }
        .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}
    </style>
</head>
<body>
<form>
    <div class=\"msg\">
        <div class=\"msg_caption\">
            <span class=\"bigger\">放大</span>
            <span class=\"smaller\">缩小</span>
        </div>
        <textarea id=\"comment\" rows=\"8\" cols=\"20\">多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
        </textarea>
    </div>
</form>
</body>
<script type=\"text/javascript\">
    /**
     * 多行文本框的高度调整
     * */
    $(function () {
        var $comment = $(\'#comment\');
        $(\'.bigger\').click(function () {
            if(!$comment.is(\":animated\")) {
                if($comment.height() < 500) {
                    //$comment.height($comment.height() + 50);//版本1
                    $comment.animate({height: \"+=50\"}, 400);
                }
            }
        });
        $(\'.smaller\').click(function () {
            if(!$comment.is(\":animated\")) {
                if($comment.height() > 50) {
                    //$comment.height($comment.height() - 50);
                    $comment.animate({height: \"-=50\"}, 400);
                }
            }
        });
    });
</script>
</html>

更改多行文本的滚动条高度

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang=\"en\">
    <meta charset=\"UTF-8\">
    <script type=\"text/javascript\" src=\"../../js/jquery-2.1.3.js\"></script>
    <title></title>
    <style type=\"text/css\">
        * { margin:0; padding:0;font:normal 12px/17px Arial; }
        .msg {width:300px; margin:100px; }
        .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}
        .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; }
        .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}
    </style>
</head>
<body>
<form>
    <div class=\"msg\">
        <div class=\"msg_caption\">
            <span class=\"up\">向上</span>
            <span class=\"down\">向下</span>
        </div>
        <textarea id=\"comment\" rows=\"8\" cols=\"20\">多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。
        </textarea>
    </div>
</form>
</body>
<script type=\"text/javascript\">
    /**
     * 多行文本框的滚动条高度调整
     * */
    $(function () {
        var $comment = $(\'#comment\');
        $(\'.up\').click(function () {
            if(!$comment.is(\":animated\")) {
                if($comment.height() < 500) {
                    $comment.animate({scrollTop: \"+=50\"}, 400);
                }
            }
        });
        $(\'.down\').click(function () {
            if(!$comment.is(\":animated\")) {
                if($comment.height() > 50) {
                    $comment.animate({scrollTop: \"-=50\"}, 400);
                }
            }
        });
    });
</script>
</html>

复选框应用

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang=\"en\">
    <meta charset=\"UTF-8\">
    <script type=\"text/javascript\" src=\"../../js/jquery-2.1.3.js\"></script>
    <title></title>
    <style type=\"text/css\">
        input:focus, textarea:focus {
            border: 1px solid#f00;
            background: #fcc;
        }
        .focus {
            border: 1px solid#f00;
            background: #fcc;
        }
    </style>
</head>
<body>
<form>
    你爱好的运动是?<br/>
    <input type=\"checkbox\" name=\"items\" value=\"足球\"/>足球
    <input type=\"checkbox\" name=\"items\" value=\"篮球\"/>篮球
    <input type=\"checkbox\" name=\"items\" value=\"羽毛球\"/>羽毛球
    <input type=\"checkbox\" name=\"items\" value=\"乒乓球\"/>乒乓球
    <input type=\"button\" id=\"checkedAll\" value=\"全  选\"/>
    <input type=\"button\" id=\"checkedNo\" value=\"全不选\"/>
    <input type=\"button\" id=\"checkedRev\" value=\"反  选\"/>
    <input type=\"button\" id=\"send\" value=\"提交\"/>
</form>
</body>
<script type=\"text/javascript\">
    /**
     * 复选框应用
     * */
    $(function () {
        $(\"#checkedAll\").click(function () {
            $(\'[name=items]:checkbox\').attr(\'checked\', true);
        });
        $(\"#checkedNo\").click(function () {
            $(\'[name=items]:checkbox\').attr(\'checked\', false);
        });
        $(\"#checkedRev\").click(function () {
            $(\'[name=items]:checkbox\').each(function () {
                this.checked = !this.checked;
            });
        });
        $(\"#send\").click(function () {
            var str = \"你选中的是: \\r\\n\";
            $(\'[name=items]:checkbox:checked\').each(function () {
                str += $(this).val() + \"\\r\\n\";
            });
            alert(str);
        });
    })
</script>
</html>

本文地址：https://www.stayed.cn/item/6427

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案