JavaScript Tutorial/jQuery/Form TextBox — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Текущая версия на 11:25, 26 мая 2010
Содержание
- 1 30. Change text field CSS
- 2 30. Find the value of an input box.
- 3 30. Focus event fires when an element receives focus either via the pointing device or by tab navigation.
- 4 30. Set textbox value
- 5 30. set the value of select elements, but selecting the appropriate options.
- 6 30. Text box selected event
- 7 30. Text input change event
- 8 30. To add a validity test to all text input elements:
30. Change text field CSS
<source lang="javascript">
<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></source>
30. Find the value of an input box.
<source lang="javascript">
<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"/>
</body>
</html> </html></source>
<source lang="javascript">
<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>
<input type="text" /> focus fire
<input type="password" /> focus fire
</body>
</html></source>
30. Set textbox value
<source lang="javascript">
<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></source>
30. set the value of select elements, but selecting the appropriate options.
<source lang="javascript">
<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>
<button>A</button> <button>B</button> <button>C</button>
<input type="text" value="click a button" /> </body>
</html></source>
30. Text box selected event
<source lang="javascript">
<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" />
</body>
</html></source>
30. Text input change event
<source lang="javascript">
<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>
<input type="text" /> blur fire
<input type="password" /> blur fire
</body>
</html></source>
30. To add a validity test to all text input elements:
<source lang="javascript">
$("input[@type="text"]").change( function() {
// check input for validity
});</source>