jquery文本框获得和失去焦点改变样式

最新推荐文章于 2024-05-25 20:43:42 发布

原创最新推荐文章于 2024-05-25 20:43:42 发布 · 3.9k 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

5 篇文章

订阅专栏

这是一个关于技术的博客，包含了各种IT领域的知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="script/jquery-1.4.3.js"></script>
<style>
 input:focus,textarea:focus{
    border:1px solid #f00;
    background:#fcc;
 }
 .focus{
    border:1px solid #f00;
    background:#fcc;
 }
</style>
<script>
  $(function(){
     $(":input").focus(function(){
      $(this).addClass("focus");
     }).blur(function(){
       $(this).removeClass("focus");
     });
    });
</script>
</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 type="password" id="pass" />
    </div>
    <div>
     <label for="msg">详细信息：</label>
     <textarea id="msg"></textarea>
    </div>
  </fieldset>
</form>
</body>
</html>