JavaScript Tutorial/jQuery/Form TextBox

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

30. Change text field CSS

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
     $("label + input").css("color", "red").val("value")
  });
    </script>
  </head>
  <body>
      <form>
        <label>Name:</label>
        <input name="name" />
        <fieldset>
          <label>Address:</label>
          <input name="newsletter" />
        </fieldset>
      </form>
      <input name="none" />
  </body>
</html>


30. Find the value of an input box.

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("input").keyup(function () {
                  var value = $(this).val();
                  $("p").text(value);
            }).keyup();
        });
    </script>
    <style>
      .selected { color:red; }
      .highlight { background:yellow; }
    </style>    
  </head>
  <body>
    <body>
      <input type="text" value="some text"/>
      <p></p>
    </body>
</html>
</html>


30. Focus event fires when an element receives focus either via the pointing device or by tab navigation.

<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("display","inline").fadeOut(1000);
             });

        });
    </script>
<style>
  div.dbl { background:yellow;color:black; }
  
</style>
  </head>
  <body>
    <body>
         <p><input type="text" /> <span>focus fire</span></p>
        
        <p><input type="password" /> <span>focus fire</span></p>
    </body>
</html>


30. Set textbox value

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("input[name^="A"]").val("data");
    });
    </script>
  </head>
  <body>
      <input name="Abc" />
      <input name="Bcd" />
      <input name="Cde" />
  </body>
</html>


30. set the value of select elements, but selecting the appropriate options.

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function () {
              var text = $(this).text();
              $("input").val(text);
            });
        });
    </script>
    <style>
      .selected { color:red; }
      .highlight { background:yellow; }
    </style>    
  </head>
  <body>
    <body>
      <div>
        <button>A</button>
        <button>B</button>
        <button>C</button>
      </div>
      <input type="text" value="click a button" />
    </body>
</html>


30. Text box selected event

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(":input").select( function () { 
                  $("div").text("selected"); 
            });
        });
    </script>
  </head>
  <body>
    <body>
    <input type="text" value="Some text" />
     <div></div>

    </body>
</html>


30. Text input change event

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("input").change( function() {
                  alert( $(this).val());
                });

        });
    </script>
  </head>
  <body>
    <body>
       <p><input type="text" /> <span>blur fire</span></p>
       <p><input type="password" /> <span>blur fire</span></p>
    </body>
</html>


30. To add a validity test to all text input elements:

$("input[@type="text"]").change( function() {
  // check input for validity
});
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Form_TextBox&oldid=9640»