jQuery入門 : jQuery入門 No.41

jQuery入門 No.41

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

───────────────────────────────
jQuery入門 No.41
───────────────────────────────

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

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

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

keypress()

となります。
keyupイベントは、キーボードのキーが押された際に発生する
イベントです。

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

keypress(関数)
となります。

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

例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(){
var count=0;
$(“input”).keypress(function () {
$(“#comment”).html(“keypress ” + (++count) );
});
});
</script>
</head>
<body>
<input type=”text” /><div id=”comment”><div>
</body>
</html>

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

keyup()

となります。

keyupイベントは、キーボードのキーが押され、上がった際発生する
イベントです。

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

keyup(関数)

となります。
以下の例では入力部分に何か入力するとkeyupの回数を
<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(){
var count=0;
$(“input”).keyup(function () {
$(“#comment”).html(“keyup ” + (++count) );
});
});
</script>
</head>
<body>
<input type=”text” /><div id=”comment”><div>
</body>
</html>