首页 > 语言 > JavaScript > 正文

jQuery中Form相关知识汇总

2024-05-06 14:47:59
字体:
来源:转载
供稿:网友

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");
        })

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选