JavaScript DHTML/jQuery/focus
Содержание
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 an event on a field
<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).addClass("tmpFocused");
}
);
$("input").blur(
function() {
$(this).removeClass("tmpFocused");
}
);
$("input").trigger("focus");
}
);
</script>
<style type="text/css">
input.tmpFocused {
background: #5092c5;
color: white;
}
</style>
</head>
<body>
<form method="post" action="javascript:void(0);">
<div>
<input type="text" name="tmpExample" value="Example" size="25" />
</div>
</form>
</body>
</html>
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>