描述：当输入框获得焦点时，给输入框增加一个样式
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>单行文本的应用</title>
    <style type="text/css">
      .focus{
        border: 1px solid #f00;
        background: #fcc;
      }
    </style>
    <script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(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 id="">
          <label for="username">名称</label>
          <input id="username" type="text" />
        </div>
        <div id="">
          <label for="pass">密码</label>
          <input type="text" name="username" id="username" />
        </div>
        <div id="">
          <label for="msg">详细信息</label>
          <textarea id="msg" rows="" cols=""></textarea>
        </div>
        
      </fieldset>
    </form>
  </body>
</html>

效果：

jQuery学习笔记——文本框的应用_fieldset


多行文本框的应用：

<!--
  时间：2017-08-29
  描述：实现用按钮控制滚动条的滚动
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <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>
    <script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      
      $(function(){
        
          var $comment = $('#comment');//获取评论框
          $('.up').click(function(){ //向上按钮绑定单击事件
           if(!$comment.is(":animated")){//判断是否处于动画
            $comment.animate({ scrollTop  : "-=50" } , 400);
          }
        })
        $('.down').click(function(){//向下按钮绑定单击事件
           if(!$comment.is(":animated")){
            $comment.animate({ scrollTop  : "+=50" } , 400);
          }
        });
        
      });
  

    </script>
  </head>
  <body>
    <form actinotallow="" method="post">
      <div class="msg">
        <div class="msg_caption">
          <span class="up" >向上</span>
          <span class="down" >向下</span>
        </div>
        <div>
          <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>
        </div>
      </div>
    </form>
  </body>

</html>

运行效果：

jQuery学习笔记——文本框的应用_input_02