teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

整形

2018/04/07 04:42

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37502

answer CHANGED
@@ -9,10 +9,12 @@
9
9
  ```
10
10
  [HTMLInputElement.value を監視する - Qiita](https://qiita.com/lhankor_mhy/items/9e6522c5b257fba2c0e6)
11
11
  みたいなのはいかがでしょう?
12
+  
12
13
 
13
14
  ### コメントを受けて追記
14
15
  [jQueryでの動作サンプル](https://jsfiddle.net/xhvgo4eb/)
15
16
  ```js
17
+ //元コード
16
18
  $(".input1,.input2").focus(function(){
17
19
  $(this).addClass("focus");
18
20
  }).blur(function(){
@@ -22,10 +24,12 @@
22
24
  }
23
25
  });
24
26
 
27
+ //想定外部スクリプト
25
28
  $('div').on('click', function(){
26
29
  $(".input1,.input2").val(100);
27
30
  });
28
31
 
32
+ //input監視関数
29
33
  var observer = function(_, target){
30
34
  Object.defineProperty(target, 'value',{
31
35
  get : function(){return Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').get.call(target)},
@@ -36,6 +40,7 @@
36
40
  });
37
41
  };
38
42
 
43
+ //.each()メソッドで監視関数を呼ぶ
39
44
  $(".input1,.input2").each( observer );
40
45
  ```
41
46
  ```html

1

コメントを受けて追記

2018/04/07 04:42

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37502

answer CHANGED
@@ -8,4 +8,43 @@
8
8
  })
9
9
  ```
10
10
  [HTMLInputElement.value を監視する - Qiita](https://qiita.com/lhankor_mhy/items/9e6522c5b257fba2c0e6)
11
- みたいなのはいかがでしょう?
11
+ みたいなのはいかがでしょう?
12
+
13
+ ### コメントを受けて追記
14
+ [jQueryでの動作サンプル](https://jsfiddle.net/xhvgo4eb/)
15
+ ```js
16
+ $(".input1,.input2").focus(function(){
17
+ $(this).addClass("focus");
18
+ }).blur(function(){
19
+ if($(this).val() == ""){
20
+ $(this).removeClass("focus");
21
+ }else{
22
+ }
23
+ });
24
+
25
+ $('div').on('click', function(){
26
+ $(".input1,.input2").val(100);
27
+ });
28
+
29
+ var observer = function(_, target){
30
+ Object.defineProperty(target, 'value',{
31
+ get : function(){return Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').get.call(target)},
32
+ set : function(x){
33
+ $(target).focus();
34
+ Object.getOwnPropertyDescriptor( HTMLInputElement.prototype, 'value' ).set.call( target, x );
35
+ }
36
+ });
37
+ };
38
+
39
+ $(".input1,.input2").each( observer );
40
+ ```
41
+ ```html
42
+ <input class="input1">
43
+ <input class="input2">
44
+ <div>pref_list</div>
45
+ ```
46
+ ```css
47
+ .focus{
48
+ border:solid 1px red;
49
+ }
50
+ ```