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
<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>
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>
<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>
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>
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>
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>
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>
To add a validity test to all text input elements:
$("input[@type="text"]").change( function() {
// check input for validity
});