JavaScript Tutorial/jQuery/Event Key
Содержание
30. Check key code
<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").keypress(function (e) { if (e.which > 65 ) { alert(e.which); } }); }); </script> </head> <body> <body> <input type="text" />
</body>
</html></source>
30. Convert key code to char
<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").keypress(function (e) { var c = String.fromCharCode(e.which); $("p").append($("<span/>")).children(":last").append(document.createTextNode(c)); $("div").text(e.which); }); }); </script> </head> <body> <body> <input type="text" />
Add text -
</body>
</html></source>
30. Document key down 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(){ $(window).keydown(function(event){ alert(event.keyCode); switch (event.keyCode) { } });
}); </script> </head> <body> <body>
<input type="text" /> focus event fire
</body>
</html></source>
30. Get key code
<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").keypress(function (e) { var c = String.fromCharCode(e.which); $("p").append($("<span/>")).children(":last").append(document.createTextNode(c)); $("div").text(e.which); }); }); </script> </head> <body> <body> <input type="text" />
Add text -
</body>
</html></source>
30. Key pressed 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").keypress(function (e) { var c = String.fromCharCode(e.which); $("p").append($("<span/>")).children(":last").append(document.createTextNode(c)); $("div").text(e.which); }); }); </script> </head> <body> <body> <input type="text" />
Add text -
</body>
</html></source>
30. Key up event and check the key code
<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 (e) { if (e.which > 65 ) { alert(e.which); } }); }); </script> </head> <body> <body> <input type="text" />
</body>
</html></source>
30. Key up event and get the typed 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").keyup(function () { var value = $(this).val(); $("div").text(value); }).keyup(); }); </script> </head> <body> <body> <input type="text" value="some text"/>
</body>
</html></source>
30. To perform an action when the escape key has been released:
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).keyup(function(event){ if (event.keyCode == 27) { alert("escaped!"); } });
}); </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>