jQuery中Form相关知识汇总

网络编程 2024/11/19 佚名

3 1 2

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

复制代码代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-2.1.3.js">     <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="/UploadFiles/2021-04-02/jquery-2.1.3.js">     <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="/UploadFiles/2021-04-02/jquery-2.1.3.js">     <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>
    你爱好的运动是"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>

jQuery,Form

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“jQuery中Form相关知识汇总”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

jQuery中Form相关知识汇总

JavaScript中document对象使用详解

使用VS开发 Node.js指南

评论“jQuery中Form相关知识汇总”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接