キーアップしたときの動作
キーアップしたときの動作
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD.xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta HTTP-EQUIVE="Content-Type" CONTENT="text/html;charset=utf-8" />
<title>キーアップしたときの動作</title>
<!-- キーアップしたときの動作 -->
<script src="../js/prototype.js" type="text/Javascript"></script>
<script src="../js/classmate11.js" type="text/Javascript"></script>
</head>
<body>
<input type=text id=inputdata name=inputdata value="" size=1 /><br />
<span id=spandata ></span><br />
<div id=divstyle class="standard">
</div>
</body>
</html>
<!--
classmate11.js
Event.observe(window, 'load', changeColor);
//ページをロードするとき読み込まれるメソッド
function changeColor()
{
//指定する色を番号管理で準備します
var dataColor = {
"1" : "LightGray",
"2" : "PeachPuff",
"3" : "PaleGreen",
"4" : "LemonChiffon",
"5" : "MintCream"
};
//登録する無名関数
//テキストに入力した値をキーアップしたときの動作
Event.observe(
'inputdata',
'keyup',
function()
{
//入力文字を取得します
var dataStr = $("inputdata").value;
//表示領域に入力した数字を表示させます
$("spandata").innerHTML = "数字 : " + dataStr + "<br />";
//数字から色を取得します
var dataBackgroundColor = dataColor[dataStr];
//色の名称を表示します
$("divstyle").innerHTML = "背景色 : " + "<br />" + dataBackgroundColor;
//背景色を設定します
$("divstyle").style.backgroundColor =dataBackgroundColor;
//上記設定が終えたらテキストをクリアにして次の入力準備とします
$("inputdata").value = "";
}
);
}
--------------------------------------------------
-->
|
|