jQuery入門 : jQuery入門 No.40

jQuery入門 No.40

2009 10月30日
コメントは受け付けていません。

───────────────────────────────
jQuery入門 No.40
───────────────────────────────

───────────────────────────────
■目次
───────────────────────────────

1)要素のfocusイベントを実行する
2)要素にfocusイベントを設定する
3)要素のkeydownイベントを実行する
4)要素にkeydownイベントを設定する

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のfocusイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

focus()

となります。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にfocusイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

focus(関数)
となります。

以下の例では入力部分にフォーカスすると
背景色がオレンジに変更され、フォーカスが
はずれると、白に戻ります。

例1)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){
$(“input”).focus(function () {
$(this).css(“background-color”, “#FC0″)
}).blur(function () {
$(this).css(“background-color”, “#FFF”)
});
});
</script>
</head>
<body>
<input type=”text” />
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のkeydownイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

keydown()

となります。
keydownイベントは、キーボードのキーを押し下げる時に発生する
イベントです。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にkeydownイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

keydown(関数)

となります。
以下の例では入力部分に何か入力するとkeycodeを
<div></div>部分に表示します。

例2)
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function(){

$(“input”).keydown(function(event) {
$(“#comment”).html(“keycodeは” + event.keyCode);
});
});
</script>
</head>
<body>
<input type=”text” /><div id=”comment”><div>
</body>
</html>

tips_admin jQuery