回答編集履歴
8
https://developer.mozilla.org/ja/docs/Web/API/MutationRecord
answer
CHANGED
|
@@ -52,4 +52,5 @@
|
|
|
52
52
|
|
|
53
53
|
# 参考
|
|
54
54
|
- [https://developer.mozilla.org/ja/docs/Web/API/MutationObserver](https://developer.mozilla.org/ja/docs/Web/API/MutationObserver)
|
|
55
|
+
- [https://developer.mozilla.org/ja/docs/Web/API/MutationRecord](https://developer.mozilla.org/ja/docs/Web/API/MutationRecord)
|
|
55
56
|
- [https://caniuse.com/#feat=mutationobserver](https://caniuse.com/#feat=mutationobserver)
|
7
a
answer
CHANGED
|
@@ -36,10 +36,12 @@
|
|
|
36
36
|
alert('empty value!!');
|
|
37
37
|
// ここでやりたいことをご自由に
|
|
38
38
|
}
|
|
39
|
+
|
|
39
40
|
});
|
|
40
41
|
});
|
|
41
42
|
|
|
42
|
-
var config = { characterData: true };
|
|
43
|
+
var config = { characterData: true };
|
|
44
|
+
|
|
43
45
|
observer.observe($textNode[0], config);
|
|
44
46
|
|
|
45
47
|
});
|
6
a
answer
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
`span`要素内のテキスト監視以外の部分は既に出来ている、またはご自身で実装出来るようなので、監視部分のサンプルコードを書いてみました。
|
|
2
2
|
|
|
3
3
|
- resetボタンを押すと、span要素内のテキストが空になる
|
|
4
|
-
- span要素を
|
|
4
|
+
- span要素のテキストノードを監視している
|
|
5
5
|
- span要素のテキストが空になるとアラートが表示される
|
|
6
6
|
|
|
7
7
|
# デモコード
|
5
a
answer
CHANGED
|
@@ -15,10 +15,16 @@
|
|
|
15
15
|
$(document).ready(function() {
|
|
16
16
|
|
|
17
17
|
var $textField = $('#textField');
|
|
18
|
+
|
|
19
|
+
// <span id='textField'>のテキストノード
|
|
20
|
+
var $textNode = $textField.contents().filter(function(index, element) {
|
|
21
|
+
return element.nodeType === 3;
|
|
22
|
+
})
|
|
23
|
+
|
|
18
24
|
var $resetButton = $('#resetButton');
|
|
19
|
-
|
|
25
|
+
|
|
20
26
|
function handleButtonClick(event) {
|
|
21
|
-
$
|
|
27
|
+
$textNode[0].textContent = '';
|
|
22
28
|
}
|
|
23
29
|
|
|
24
30
|
$resetButton.on('click', handleButtonClick)
|
|
@@ -26,18 +32,17 @@
|
|
|
26
32
|
var observer = new MutationObserver((mutations) => {
|
|
27
33
|
mutations.forEach((mutation) => {
|
|
28
34
|
|
|
29
|
-
if (mutation.type === "
|
|
35
|
+
if (mutation.type === "characterData" && mutation.target.textContent === "") {
|
|
30
36
|
alert('empty value!!');
|
|
31
37
|
// ここでやりたいことをご自由に
|
|
32
38
|
}
|
|
33
39
|
});
|
|
34
40
|
});
|
|
35
41
|
|
|
36
|
-
|
|
42
|
+
var config = { characterData: true };
|
|
37
|
-
observer.observe($
|
|
43
|
+
observer.observe($textNode[0], config);
|
|
38
44
|
|
|
39
45
|
});
|
|
40
|
-
|
|
41
46
|
```
|
|
42
47
|
|
|
43
48
|
[https://codepen.io/anon/pen/yjJBJq
|
4
a
answer
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
|
|
24
24
|
$resetButton.on('click', handleButtonClick)
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
var observer = new MutationObserver((mutations) => {
|
|
27
27
|
mutations.forEach((mutation) => {
|
|
28
28
|
|
|
29
29
|
if (mutation.type === "childList" && mutation.target.textContent === "") {
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
});
|
|
34
34
|
});
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
var config = { childList: true };
|
|
37
37
|
observer.observe($textField[0], config);
|
|
38
38
|
|
|
39
39
|
});
|
3
a
answer
CHANGED
|
@@ -25,12 +25,10 @@
|
|
|
25
25
|
|
|
26
26
|
const observer = new MutationObserver((mutations) => {
|
|
27
27
|
mutations.forEach((mutation) => {
|
|
28
|
+
|
|
28
|
-
if (mutation.target.textContent === "") {
|
|
29
|
+
if (mutation.type === "childList" && mutation.target.textContent === "") {
|
|
29
|
-
|
|
30
30
|
alert('empty value!!');
|
|
31
|
-
|
|
32
31
|
// ここでやりたいことをご自由に
|
|
33
|
-
|
|
34
32
|
}
|
|
35
33
|
});
|
|
36
34
|
});
|
2
a
answer
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
`span`要素内のテキスト監視以外の部分は既に出来ている、またはご自身で実装出来るようなので、監視部分のサンプルコードを書いてみました。
|
|
2
2
|
|
|
3
|
+
- resetボタンを押すと、span要素内のテキストが空になる
|
|
4
|
+
- span要素を子要素含め監視している
|
|
5
|
+
- span要素のテキストが空になるとアラートが表示される
|
|
6
|
+
|
|
3
7
|
# デモコード
|
|
4
8
|
|
|
5
9
|
```
|
1
a
answer
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
`span`要素内のテキスト監視以外の部分は既に出来ている、またはご自身で実装出来るようなので、監視部分のサンプルコードを書いてみました。
|
|
2
|
+
|
|
3
|
+
# デモコード
|
|
4
|
+
|
|
1
5
|
```
|
|
2
6
|
<span id='textField'>100</span>
|
|
3
7
|
<button id='resetButton' type='button'>reset</button>
|