JavaScript DHTML/jQuery/Form TextBox
Содержание
- 1 Change text field CSS
- 2 Find the value of an input box.
- 3 Focus event fires when an element receives focus either via the pointing device or by tab navigation.
- 4 Set textbox value
- 5 set the value of select elements, but selecting the appropriate options.
- 6 Text box selected event
- 7 Text input change event
- 8 To add a validity test to all text input elements:
Change text field CSS
<source lang="html4strict">
<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>
Find the value of an input box.
<source lang="html4strict">
<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="html4strict">
<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>
Set textbox value
<source lang="html4strict">
<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>
set the value of select elements, but selecting the appropriate options.
<source lang="html4strict">
<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>
Text box selected event
<source lang="html4strict">
<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>
Text input change event
<source lang="html4strict">
<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>
To add a validity test to all text input elements:
<source lang="html4strict">
$("input[@type="text"]").change( function() {
// check input for validity
});
</source>