jQuery中Form相關知識匯總

2019-11-20 13:29:09

字體：大中小

來源：轉載

供稿：網友

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>