質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2555閲覧

テキストボックスの入力制御

someiyoshino333

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/12/15 13:31

お世話になっております。

javascriptblurやchangeについてお伺いしたいことがございます。
下記コードを今コーディングしているのですが、
selectboxの入力変化に応じて動的に入力項目の背景色変更を行いたいと思っています。

ですが下記コードですと、selectboxを変更した後に、textboxにカーソルを合わせると、
selectboxに応じていないところまでピンク色が変わってしまいます。
やりたいこと

  1. サンプル1を選択しているとき

テスト、テスト2の背景色が文字がnullの時のみ色変化。
※ほかのtextをクリックなどしても、白のまま保持

  1. サンプル2を選択しているとき

テスト3、テスト4の背景色が文字がnullの時のみ色変化。
※ほかのtextをクリックなどしても、白のまま保持

javascript初心者のため、うまく組めていないのだと思いますが、ご教授願います。
乱雑なコードで申し訳ございませんが下記コードがそのものです。

HTML

1<html> 2<head> 3 <title>タイトル</title> 4 <script src="../js/1.4.2jq.js"></script> 5 <script type="text/javascript" src="../js/example1.js"></script> 6</head> 7 8<body bgcolor=white background=""> 9 <h1>テスト</h1> 10 11 <select name = 'iikanji' id = 'iikanji'> 12 <option value="0">サンプル1</option> 13 <option value="1">サンプル2</option> 14 <option value="2">サンプル3</option> 15 </select><br><br><br><br><br> 16 <br> 17 テスト 18 <input type="text" name="test1"><br> 19 テスト2 20 <input type="text" name="test2"><br> 21 テスト3 22 <input type="text" name="test3"><br> 23 テスト4 24 <input type="text" name="test4"><br> 25 26 <input type="text"> 27 <input value="dummy" type="button"> 28 29</body> 30</html> 31

javascript

1 2$(function(){ 3 4 5 $('input[type=text]').css({ 6 backgroundColor: '#fff', 7 border: '#666666 1px solid' 8 }); 9 10 11 colorchange = aaa(); 12 $('select[name = iikanji]').change(function(){ 13 14 $('input').each(function(){ 15 16 if(this.value == ""){ 17 $(this).css("background-color","#ffffff"); 18 } 19 }); 20 21 colorchange = aaa(); 22 console.log(colorchange); // 出力 23 bbb(colorchange); 24 }); 25 bbb(colorchange); 26}); 27 28 29 30 31// $(function(){ 32// $("input").blur(function () { 33// console.log(this.type+" lost focus."); 34// //alert('aaaaaaaaaaa'); 35// }); 36// }); 37 38 39function aaa (){ 40 41 var colorchange = []; 42 var val = $('[name=iikanji]').val(); 43 44 switch(val){ 45 case "0": 46 colorchange = ['test1','test2']; 47 break; 48 case "1": 49 colorchange = ['test4','test3']; 50 break; 51 52 case "2": 53 colorchange = ['test1']; 54 break; 55 case "3": 56 colorchange = ['test2']; 57 break; 58 } 59 return colorchange; 60 61}; 62 63function bbb (colorchange){ 64 65 for (var i = 0; i <= colorchange.length; i++) { 66 67 $('input[name = ' + colorchange[i] + ']').each(function(){ 68 if(this.value == ""){ 69 $(this).css("background-color","#ffebeb"); 70 } else { 71 $(this).css("background-color","#ffffff"); 72 } 73 }); 74 } 75 for (var i = 0; i <= colorchange.length; i++) { 76 $('input[name = ' + colorchange[i] + ']').blur(function(){ 77console.log('aaa' +colorchange[i]); // 出力 78if(this.value == ""){ 79 $(this).css("background-color","#ffebeb"); 80} else { 81 $(this).css("background-color","#ffffff"); 82} 83}); 84 } 85 for (var i = 0; i <= colorchange.length; i++) { 86 $('input[name = ' + colorchange[i] + ']').focus(function(){ 87 if(this.value == ""){ 88 $(this).css("background-color","#ffebeb"); 89 } else { 90 $(this).css("background-color","#ffffff"); 91 } 92 }); 93 } 94}; 95

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

とりあえず仕様がいまいちわからなかったので適当に作りました。
今回作成した部分は

サンプル1を選択しているとき

テスト、テスト2の背景色が文字がnullの時のみ色変化。
※ほかのtextをクリックなどしても、白のまま保持
サンプル2を選択しているとき
テスト3、テスト4の背景色が文字がnullの時のみ色変化。
※ほかのtextをクリックなどしても、白のまま保持

になります。
他のtextをクリックしてと書いてありますが、その部分に関してblurを使用されていましたがblurいるのかなぁと思ってみたり。。。

かるくリファクタリングを入れているので分かりづらかったらすいません。。。

html

1<html> 2<head> 3 <title>タイトル</title> 4 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 5 <style> 6 input{ 7 border: '#666666 1px solid'; 8 background: '#ffffff'; 9 } 10 </style> 11</head> 12 13<body> 14 <h1>テスト</h1> 15 <select name='iikanji' id='iikanji'> 16 <option value="0">サンプル1</option> 17 <option value="1">サンプル2</option> 18 <option value="2">サンプル3</option> 19 </select> 20 <br> 21 <br> 22 <br> 23 <br> 24 <br> 25 <br> 26 27 テスト 28 <input type="text" name="test1" class="jsInputs"><br> 29 テスト2 30 <input type="text" name="test2" class="jsInputs"><br> 31 テスト3 32 <input type="text" name="test3" class="jsInputs"><br> 33 テスト4 34 <input type="text" name="test4" class="jsInputs"><br> 35 36 <input type="text"> 37 <input value="dummy" type="button"> 38 <script type="text/javascript" src="index.js"></script> 39</body> 40</html>

javascript

1// inputタグに使う色を定義 2var inputColor = { 3 focus: '#ffebeb', 4 notFocus: '#ffffff' 5} 6 7// selectボックスの値に対してどのinputかを定義 8var targetInputs = { 9 0: ['test1','test2'], 10 1: ['test4','test3'], 11 2: ['test1'] 12} 13 14// 選択されているvalueから色を変えたいinputと色を白にしたいinputを分けて返す 15var targetInputsFromSelectedValue = function(selectedValue){ 16 var _targets = { 17 focus: [], 18 notFocus: [] 19 }, 20 $inputs = $('.jsInputs'); 21 22 $inputs.each(function(item, index){ 23 var $this = $(this); 24 if(targetInputs[selectedValue].indexOf($this.attr('name')) > -1){ 25 _targets.focus.push($this) 26 }else{ 27 _targets.notFocus.push($this) 28 } 29 }) 30 31 return _targets; 32} 33 34// 振り分けられたhashの中身を全て回してfocusしないところは白に 35// focusするところはnullであれば色を変え、そうでない場合は白にする 36var setColorToInputs = function(targetInputs){ 37 Object.keys(targetInputs).forEach(function(key){ 38 var $inputs = targetInputs[key] 39 for(var i = 0; i < $inputs.length; i++){ 40 var $input = $inputs[i] 41 var isNull = ($input.val() === '') ? true : false; 42 43 if(key === 'notFocus'){ 44 $input.css('background', inputColor.notFocus) 45 }else{ 46 $input.css('background', inputColor[isNull ? 'focus' : 'notFocus']) 47 } 48 } 49 }) 50 51} 52 53// イベントを登録する 54var bindEvent = function(){ 55 $("#iikanji").on('change', function(){ 56 var value = $(this).val(); 57 var $targetInputs = targetInputsFromSelectedValue(value) 58 59 setColorToInputs($targetInputs) 60 }); 61} 62 63bindEvent()

イメージ説明

投稿2016/12/15 16:18

MasakazuFukami

総合スコア1869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問