動的にテキストが入力されるinputタグにクラスを付与したい

Question

動的にテキストが入力される「.input1,.input2」の2つのinputタグに「focus」クラスを付与したいです。
それぞれに直接フォーカスした場合の処理が実現できたのですが、

$(".input1,.input2").focus(function(){
    $(this).addClass("focus");
  }).blur(function(){
	if($(this).val() == ""){
$(this).removeClass("focus");
	}else{
	}
  });

タグ自体を直接操作せずそのほか条件で動的にテキストが入力される場合(※)がありその場合の処理がわからない状態です。

※具体的には郵便番号「name=zip1,zip2」入力による住所欄の自動入力です。この郵便番号欄にはもちろん実在する郵便番号の数値を入力した時にしか自動反映されません。それ以外にも住所候補一覧「class="pref_list"」のaタグをクリックしても反映されます。

Jqueryでの実現方法をお教えください。

ご教授の程よろしくお願い致します。

Comments

[defghi1977]

> 動的にテキストが入力される の部分が判りにくいです. もう少し状況を詳しく説明して下さい.

[castail]

具体的には郵便番号「name=zip1,zip2」入力による住所欄の自動入力です。この郵便番号欄にはもちろん実在する郵便番号の数値を入力した時にしか自動反映されません。それ以外にも住所候補一覧「class="pref_list"」のaタグをクリックしても反映されます。

[defghi1977]

要は, 「(手動・自動に関わらず)住所欄に入力が有った際に専用のスタイルを適用したい」ということですか？

[castail]

はい、その通りです。ご説明が悪く申し訳ございません。

Answer 1

このようなフォーカスをもっているノードに対するスタイル付けはスクリプトでやるより:focus擬似クラスを用いるのが常道です.

https://developer.mozilla.org/ja/docs/Web/CSS/:focus

input:focus{
	background-color:yellow;
}

NOTE:
と解釈しましたが如何でしょうか?

---

input要素の入力状態によってスタイルを切り替えたいとのことでしたので, input要素の入力内容を監視し, その内容によってクラスを付け替えるようにしてみました.

NOTE:
本来このような動作を単純化するためにCSSが存在するのですが, うまく要件に合致する擬似クラスを見つけることが出来ませんでした.

<input id="address"/>

input{
	background-color: white;
}
input.inputted{
	background-color: yellow;
}

"use strict";
{
	(function observe(){
		address.classList[address.value == "" ? "remove" : "add"]("inputted");
		requestAnimationFrame(observe);
	})();
}

Comments

[castail]

ご回答ありがとうございます。

こちらの記述を試したのですが、うまく動作しない状態です。
こちらの記述ミス含め検証したいと思います。

ただ、今回は別の方の記述で実現できましたので、ベストアンサーはその方とさせて頂きます。悪しからず、ご了承ください。

Answer 2

Object.defineProperty(target, 'value',{
  get : function(){return Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').get.call(target)},
  set : function(x){
    console.log(x);
    Object.getOwnPropertyDescriptor( HTMLInputElement.prototype, 'value' ).set.call( target, x );
  }
})

HTMLInputElement.value を監視する - Qiita
みたいなのはいかがでしょう？

コメントを受けて追記

jQueryでの動作サンプル

//元コード
$(".input1,.input2").focus(function(){
    $(this).addClass("focus");
  }).blur(function(){
    if($(this).val() == ""){
$(this).removeClass("focus");
    }else{
    }
  });

//想定外部スクリプト
$('div').on('click', function(){
  $(".input1,.input2").val(100);
});

//input監視関数
var observer = function(_, target){
  Object.defineProperty(target, 'value',{
    get : function(){return Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').get.call(target)},
    set : function(x){
      $(target).focus();
      Object.getOwnPropertyDescriptor( HTMLInputElement.prototype, 'value' ).set.call( target, x );
    }
  });
};

//.each()メソッドで監視関数を呼ぶ
$(".input1,.input2").each( observer );

<input class="input1">
<input class="input2">
<div>pref_list</div>

.focus{
  border:solid 1px red;
}

Comments

[castail]

ご回答ありがとうございます。
事後の条件提示で大変恐縮ですが、jqueryでの実現方法をご教授いただけますでしょうか？

[Lhankor_Mhy]

jQuery でも問題なく動作するはずです。
ご不明の点があればお知らせください。

[Lhankor_Mhy]

jQuery での動作サンプルを追記しました。
ご不明の点があればお知らせください。

[castail]

ご回答ありがとうございます。
ご教授頂いた内容で実現できました！
感謝いたします。

Answer 3

jQueryのtrigger()メソッドでカスタムイベントを発火させてあげれば良いのでは？

https://codepen.io/anon/pen/wmQJbL

<input id='textbox' type='text' value='' />
<button id='addButton'>Add</button>
<button id='removeButton'>Remove</button>

.focus {
    background-color: #FBFDC7;
}

var $textbox = $('#textbox');
var $addButton = $('#addButton');
var $removeButton = $('#removeButton');

$addButton.on('click', function() {
	$textbox.val('東京都');
});

$removeButton.on('click', function() {
	$textbox.removeClass('focus');
});

var originalVal = $textbox.val.bind($textbox);

Object.defineProperty(
	$textbox,
	"val",
	{
		value: function (v) {
			originalVal(v)
			$(this).trigger("auto-filled");
		}
	}
);

$textbox.on("auto-filled", function (event) {
	$(this).addClass("focus")
});

追記

いや、なんかあやしいので気にしないでください。