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

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

ただいまの
回答率

89.07%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,582

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

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

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

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

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

<html>
<head>
    <title>タイトル</title>
    <script src="../js/1.4.2jq.js"></script>
    <script type="text/javascript" src="../js/example1.js"></script>
</head>

<body bgcolor=white background="">
    <h1>テスト</h1>

    <select name = 'iikanji' id = 'iikanji'>
        <option value="0">サンプル1</option>
        <option value="1">サンプル2</option>
        <option value="2">サンプル3</option>
    </select><br><br><br><br><br>
    <br>
    テスト
    <input type="text" name="test1"><br>
    テスト2
    <input type="text" name="test2"><br>
    テスト3
    <input type="text" name="test3"><br>
    テスト4
    <input type="text" name="test4"><br>

    <input type="text">
    <input value="dummy" type="button">

</body>
</html>
$(function(){


    $('input[type=text]').css({
        backgroundColor: '#fff',
        border: '#666666 1px solid'
    });


    colorchange = aaa();
    $('select[name = iikanji]').change(function(){

        $('input').each(function(){

            if(this.value == ""){
                $(this).css("background-color","#ffffff");
            }
        });

        colorchange = aaa();
        console.log(colorchange); // 出力
        bbb(colorchange);
    });
    bbb(colorchange);
});




// $(function(){
//     $("input").blur(function () {
//         console.log(this.type+" lost focus.");
//         //alert('aaaaaaaaaaa');
//     }); 
// });


function aaa (){

    var colorchange = [];
    var val = $('[name=iikanji]').val();

    switch(val){
        case "0":
        colorchange = ['test1','test2'];
        break;
        case "1":
        colorchange = ['test4','test3'];
        break;

        case "2":
        colorchange = ['test1'];
        break;
        case "3":
        colorchange = ['test2'];
        break;
    }
    return colorchange;

};

function bbb (colorchange){

    for (var i = 0; i <= colorchange.length; i++) {

        $('input[name = ' + colorchange[i] + ']').each(function(){
            if(this.value == ""){
                $(this).css("background-color","#ffebeb");
            } else {
                $(this).css("background-color","#ffffff");
            }
        });
    }
    for (var i = 0; i <= colorchange.length; i++) {
        $('input[name = ' + colorchange[i] + ']').blur(function(){
console.log('aaa' +colorchange[i]); // 出力
if(this.value == ""){
    $(this).css("background-color","#ffebeb");
} else {
    $(this).css("background-color","#ffffff");
}
});
    }
    for (var i = 0; i <= colorchange.length; i++) {
        $('input[name = ' + colorchange[i] + ']').focus(function(){
            if(this.value == ""){
                $(this).css("background-color","#ffebeb");
            } else {
                $(this).css("background-color","#ffffff");
            }
        });
    }
};
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

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

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

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

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

<html>
<head>
  <title>タイトル</title>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <style>
    input{
      border: '#666666 1px solid';
      background: '#ffffff';
    }
  </style>
</head>

<body>
  <h1>テスト</h1>
  <select name='iikanji' id='iikanji'>
    <option value="0">サンプル1</option>
    <option value="1">サンプル2</option>
    <option value="2">サンプル3</option>
  </select>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

  テスト
  <input type="text" name="test1" class="jsInputs"><br>
  テスト2
  <input type="text" name="test2" class="jsInputs"><br>
  テスト3
  <input type="text" name="test3" class="jsInputs"><br>
  テスト4
  <input type="text" name="test4" class="jsInputs"><br>

  <input type="text">
  <input value="dummy" type="button">
  <script type="text/javascript" src="index.js"></script>
</body>
</html>
// inputタグに使う色を定義
var inputColor = {
  focus: '#ffebeb',
  notFocus: '#ffffff'
}

// selectボックスの値に対してどのinputかを定義
var targetInputs = {
  0: ['test1','test2'],
  1: ['test4','test3'],
  2: ['test1']
}

// 選択されているvalueから色を変えたいinputと色を白にしたいinputを分けて返す
var targetInputsFromSelectedValue = function(selectedValue){
  var _targets = {
        focus: [],
        notFocus: []
      },
      $inputs = $('.jsInputs');

  $inputs.each(function(item, index){
    var $this = $(this);
    if(targetInputs[selectedValue].indexOf($this.attr('name')) > -1){
      _targets.focus.push($this)
    }else{
      _targets.notFocus.push($this)
    }
  })

  return _targets;
}

// 振り分けられたhashの中身を全て回してfocusしないところは白に
// focusするところはnullであれば色を変え、そうでない場合は白にする
var setColorToInputs = function(targetInputs){
  Object.keys(targetInputs).forEach(function(key){
    var $inputs = targetInputs[key]
    for(var i = 0; i < $inputs.length; i++){
      var $input = $inputs[i]
      var isNull = ($input.val() === '') ? true : false;

      if(key === 'notFocus'){
        $input.css('background', inputColor.notFocus)
      }else{
        $input.css('background', inputColor[isNull ? 'focus' : 'notFocus'])
      }
    }
  })

}

// イベントを登録する
var bindEvent = function(){
  $("#iikanji").on('change', function(){
    var value = $(this).val();
    var $targetInputs = targetInputsFromSelectedValue(value)

    setColorToInputs($targetInputs)
  });
}

bindEvent()

イメージ説明

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る