JavaScript Tutorial/jQuery/focus

Материал из Web эксперт
Версия от 18:52, 25 мая 2010; (обсуждение)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Fire focus event

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("input").focus(function () {
                 $(this).next("span").css("color","red");
            });
        });
    </script>
  </head>
  <body>
    <body>
     <p><input type="text" /> <span>focus event fire</span></p>
    </body>
</html>


Set focus form field

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("input").removeAttr("disabled").focus().val("editable now");
        });
    </script>
  </head>
  <body>
    <body>
      <button>Enable</button>
      <input type="text" disabled="disabled" value="data"/>
  </body>
</html>


Set focus to text box

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("input").focus();
        });
    </script>
  </head>
  <body>
    <body>
     <p><input type="text" /> <span>focus event fire</span></p>
    </body>
</html>


To focus on a login input box with id "login" on page startup

$(document).ready(function(){
  $("#login").focus();
});


Trigger focus event

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        
            
            $("#old").click(function(){
              $("input").trigger("focus");
            });
            $("#new").click(function(){
              $("input").triggerHandler("focus");
            });
            $("input").focus(function(){
              $("<span>Focused!</span>").appendTo("body");
            });
               

        });
    </script>
  </head>
  <body>
    <body>
          <button id="old">.trigger("focus")</button>
          <button id="new">.triggerHandler("focus")</button><br/><br/>
        
          <input type="text" value="To Be Focused"/>
                         
    </body>
</html>