「JavaScript/イベント処理」の版間の差分
削除された内容 追加された内容
ページの作成:「{{stub}} Webページにおいて、ユーザーが「マウスで画面のボタンを押した」とか、画面をスクロールした、とか、ともかく何ら…」 |
onkeyup プロパティ |
||
1 行
{{stub}}
== 原理 ==
Webページにおいて、ユーザーが「マウスで画面のボタンを押した」とか、画面をスクロールした、とか、ともかく何らかのアクションをユーザーした際のイベント処理を宣言するには、
6 ⟶ 7行目:
;コード例
<syntaxhighlight lang="
<!DOCTYPE html>
<html lang="ja">
23 ⟶ 24行目:
</html>
</syntaxhighlight>
== 応用例 ==
HTMLの入力ボックスに何かを入力したイベントとかも、JavaScriptで制御できる。
たとえば、よく何かの登録画面において、テキスト入力ボックスに入力された文字が空白の場合には、「登録」ボタンを押せなくなるプログラムなら、下記のようになる。
ユーザー登録を例にしよう。
;コード例
<syntaxhighlight lang="JavaScript">
<form action="catchTest.php" method="post" onload="funcChange()" >
ユーザー名を登録: <input type="text" name="username" id="textbox1" onchange="funcChange()" onkeyup="funcChange()" >
<input type="submit" value="登録" id="button1" onchange="funcChange()" onkeyup="funcChange()" >
</form>
<script type="text/javascript" >
// 起動直後に空白だったら、登録ボタンを押せないように。
if ( document.getElementById("textbox1").value == "" ) {
document.getElementById("button1").disabled = true;
}
// テキスト入力のたびに判定。テキスト文字が何かあれば、登録ボタンを無効にする処理。
function funcChange(){
if ( document.getElementById("textbox1").value == "" ) {
document.getElementById("button1").disabled = true;
}
if ( document.getElementById("textbox1").value != "" ) {
document.getElementById("button1").disabled = false;
}
}
</script>
</syntaxhighlight>
;解説
まず、HTML側で onchange プロパティ (onChange) で、何か変更があったごとに起動する関数を指定できる。ただし、このonchangeプロパティは、テキスト入力ボックスの入力の場合には、入力後にそのテキストボックスからマウスカーソルが外れてからでないと反応しないので、これだけではあまり実用的ではない。
なので、さらに onkeyup プロパティ (onKeyUP)という、何かキーボードのボタンが押されて持ち上げられた場合に起動するイベント処理のプロパティを使う。
書式は
onkeyup="キーアップ時に起動したい関数名()"
である。(onchangeも同様)
JavaScript で関数を定義する場合は、型名「function」を忘れないようにしよう。
よく初心者は、C言語などJavaScript以外の他言語の癖で、型名「function」を忘れることがある。
さて、
onload="funcChange()"
というのは、「先にブラウザが funcChange() を読み込んでから、あとから、このonloadプロパティのあるタグ（上記コード例ではform）を実行しなさい」という命令。
document.getElementById("button1") は、Id「button1」への命令の指令で、つづくプロパティ「.disabled」によって無効化することによって、ボタンとして機能しなくなる。（また、ブラウザがディスプレイ上で、自動的にdisabledされた対象物の色をうすくしてくれるので、無効化された事がユーザー視点でも分かる。）
form タグはHTMLのタグの一種。わからなければwikibooks『[[HTML/フォーム]]』を読め。
| |||