<input>の背景色を入力された値によって即座に変更する

[新着] Webテンプレートを仮オープンしました

0   名前： javascript初心者 ： 2006/07/19（水） 22:44  ID:E9I.6.2x
【何をしたいのか】
inputのテキストフィールドの背景色background-colorを、入力された値によって、
即座に変化させたい。1が入力されるとオレンジ、2が入力されるとグリーンというように入力された値に反応して背景に色をつけたい。これによって誤入力が防げるはずです。
【現在の状況】
入力値の桁数制限をして1桁しか入力できないようにしています。
【何をしてみたのか】
（１）入力値の取得（２）styleプロパティーの変更
という手順でいいでしょうか？

もうすでにどこかに公開されているスクリプトがあればおしえてください。
1   名前： 牛若 ： 2006/07/19（水） 22:44  ID:zNm8EkAb
＞inputのテキストフィールドの背景色を変える
＞1が入力されるとオレンジ、2が入力されるとグリーンというように
　入力された値に反応して背景に色をつけたい

これはぜんぜん難しくありません。
しかし、

＞入力された値によって、即座に変化させたい

これは難しいですね。
即座とはどういう状況かをもっと説明して頂かないと・・・
2   名前： javascript初心者 ： 2006/07/19（水） 22:44  ID:E9I.6.2x
作成中のものです。動作はしません。

<head>
<script language="JavaScript">
<!--
var DefaultColorText = "#fff"; // 初期値の時の背景色
var ChangedColorText = "#f99"; // 初期値変更時の背景色
function chgText(){
mae = document.frm.name.value;
ato = document.frm.name.value;
if(mae = 1){
document.frm.name.style.backgroundColor = ChangedColorText;
}else{
document.frm.name.style.backgroundColor = DefaultColorText;
}
}

// -->
</script>

</head>

<body>

<p style="font-size:14pt; font-weight:bold; color:#00f"> 入力すると背景色が変わります。 </p>

<form name="frm">
<input type="text" name="name" maxlength="1" onChange="JavaScript:chgText()">
</form>

</body>
</html>

3   名前： NullPo ： 2006/07/19（水） 22:44  ID:XoE1slt9
>>2
そのコードでも動いたのですが、何か問題が？
4   名前： 牛若 ： 2006/07/19（水） 22:44  ID:zNm8EkAb
なるほど。イベントはonchangeというわけですね。

＞動作はしません。

×　if(mae = 1){
○　if(mae == 1){

＞1が入力されるとオレンジ、2が入力されるとグリーンというように入力さ
＞れた値に反応して背景に色をつけたい。

こんな感じですか
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function chgBG(){
var el = document.forms['frm'].elements['name1'];
if(el.value == 1){
 el.style.backgroundColor = 'orange';
  }else if(el.value == 2){
el.style.backgroundColor = 'green';}
}
</script>
</head>
<body>
<form name="frm">
<div>
<input type="text" name="name1" maxlength="1" onChange="chgBG()">
</div>
</form>
</body>
</html>
5   名前： javascript初心者 ： 2006/07/19（水） 22:44  ID:E9I.6.2x
10色パターンでswitchでつくりましたが、inputを２０個用意するとこれと同じのを20個書かないといけないのでしょうか。省略の方法ありますか？
<head>
<title>フォームカラー</title>
<script language="JavaScript">
function chgbgc(){
	switch(document.kansai.osaka01.value){
	case '1':document.kansai.osaka01.style.backgroundColor = "#FFFF99";
	break;
	case '2':document.kansai.osaka01.style.backgroundColor = "#CCFF66";
	break;
	case '3':document.kansai.osaka01.style.backgroundColor = "#99FFFF";
	break;
	case '4':document.kansai.osaka01.style.backgroundColor = "#FFCCCC";
	break;
	case '5':document.kansai.osaka01.style.backgroundColor = "#FFCC66";
	break;
	case '6':document.kansai.osaka01.style.backgroundColor = "#99CCFF";
	break;
	case '7':document.kansai.osaka01.style.backgroundColor = "#CC99CC";
	break;
	case '8':document.kansai.osaka01.style.backgroundColor = "#CCCCCC";
	break;
	case '9':document.kansai.osaka01.style.backgroundColor = "#FF6666";
	break;
	case '0':document.kansai.osaka01.style.backgroundColor = "#FFFFFF";
	break;
	}
}

</script>

</head>

<body>

<p>入力すると背景色が変わります。 </p>

<form name="kansai">
  <input type="text" style="font-size: 14pt;" name="osaka01" maxlength="1" onChange="chgbgc()">
  <input type="text" style="font-size: 14pt;" name="osaka012" maxlength="1" onChange="chgbgc()">
</form>

6   名前： asaki ： 2006/07/19（水） 22:44  ID:Y1L64jC2
これでどうでしょうか。
function chgbgc(obj){
	switch(obj.value){
	case '1':obj.style.backgroundColor = "#FFFF99";
	break;
	case '2':obj.style.backgroundColor = "#CCFF66";
	break;
	case '3':obj.style.backgroundColor = "#99FFFF";
	break;
	case '4':obj.style.backgroundColor = "#FFCCCC";
	break;
	case '5':obj.style.backgroundColor = "#FFCC66";
	break;
	case '6':obj.style.backgroundColor = "#99CCFF";
	break;
	case '7':obj.style.backgroundColor = "#CC99CC";
	break;
	case '8':obj.style.backgroundColor = "#CCCCCC";
	break;
	case '9':obj.style.backgroundColor = "#FF6666";
	break;
	case '0':obj.style.backgroundColor = "#FFFFFF";
	break;
	}
}

で、
<input type="text" style="font-size: 14pt;" name="osaka01" maxlength="1" onChange="chgbgc()">を
<input type="text" style="font-size: 14pt;" name="osaka01" maxlength="1" onChange="chgbgc(this)">に変える。
name属性は、ただ色を変えるだけなら要らないはず。
7   名前： javascript初心者 ： 2006/07/19（水） 22:44  ID:E9I.6.2x
感謝！感謝！すばらしい
そうななんですか、name属性なしで可能だったんですね。
どうもありがとうございました。
入力を数字だけに制限し、さらに入力桁数を制限すれば
より一層エラーがなくなる便利なフォームができそうです。
みんさんに感謝します。
8   名前： 牛若 ： 2006/07/19（水） 22:44  ID:BEqkv9Ka
愚かなことは言いたくないんですが、ヒトコト言いたい気分なので。
マナーとして：

こういうモノ(>>5)が最初から望みなら、*最初から*そう書いてください。

自分であとはどうにでもするつもりならいざ知らず、１と２で背景を
変えるというので、そういうスクリプトを書いて提示。

すると、こんどは、switchが必要なほどデザインを変えて来る。
こう後出しでコロコロ主旨を変えるのは、結局、お互い時間の無駄でしか
ない。



9   名前： Pid ： 2006/07/19（水） 22:44  ID:/cYYuQrv
function chgbgc (obj) {
    obj.style.backgroundColor = chgbgc.colorList[obj.value];
}

chgbgc.colorList = [ '#ff9', '#cf6', '#9ff', '#fcc', '#fc6', '#9cf', 'c9c', '#ccc', '#f66', '#fff' ];


どうしても switch を使いたいなら

function chgbgc (obj) {
    var c;
    
    switch (obj.value) {
    case '1' : c = '#ff9'; break;
    case '2' : c = '#cf6'; break;
    // 中略
    }
    
    obj.style.backgroundColor = c;
}


同じ記述の繰り返しは，極力避けるべきです。
http://www.pro.or.jp/%7Efuji/mybooks/cdiag/



>>5
> <input type="text" style="font-size: 14pt;" ... >

モニタでの表示がメインなら，pt 単位ではなく px 単位を使います（pt 単位は，プリンタで印刷する場合など，あらかじめ解像度が分かっている装置に対して使うものです）。
一覧へ戻る