回答編集履歴
3
Excel入力UI
test
CHANGED
|
@@ -162,11 +162,13 @@
|
|
|
162
162
|
|
|
163
163
|
1. `addEventListener` で `click` イベントハンドラを定義
|
|
164
164
|
|
|
165
|
-
2. click イベントハンドラから
|
|
165
|
+
2. click イベントハンドラから既存のテキストノードを `createElelement` で生成したinput要素ノードと `replaceChild` を使って、入れ替える(テキストノードは変数 `textNode` に保存しておく)
|
|
166
166
|
|
|
167
|
-
3.
|
|
167
|
+
3. `blur`, `submit` イベント等で入力確定タイミングを捕捉
|
|
168
168
|
|
|
169
|
-
4.
|
|
169
|
+
4. 入力内容を [HTMLInputElement.prototype.value](https://www.google.com/search?q=HTMLInputElement+value&ie=UTF-8) で参照し、`textNode.data = value` でテキストノード値に代入
|
|
170
|
+
|
|
171
|
+
5. `removeChild` でinput要素ノードとテキストノード(変数 `textNode`)を入れ替える
|
|
170
172
|
|
|
171
173
|
|
|
172
174
|
|
|
@@ -180,4 +182,12 @@
|
|
|
180
182
|
|
|
181
183
|
|
|
182
184
|
|
|
185
|
+
### 更新履歴
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
- 2019/03.23 12:10 「テキストノード値を編集する」節を `replaceChild` を使った処理工程に変更(Excel入力UI)
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
183
193
|
Re: Yhaya さん
|
2
`blur`, `submit` イベント等で入力確定タイミングを捕捉
test
CHANGED
|
@@ -164,9 +164,9 @@
|
|
|
164
164
|
|
|
165
165
|
2. click イベントハンドラから、input要素をドキュメントに `appendChild`
|
|
166
166
|
|
|
167
|
-
3. 入力内容を [HTMLInputElement.prototype.value
|
|
167
|
+
3. 入力内容を [HTMLInputElement.prototype.value](https://www.google.com/search?q=HTMLInputElement+value&ie=UTF-8) で参照
|
|
168
168
|
|
|
169
|
-
4. 入力確定
|
|
169
|
+
4. `blur`, `submit` イベント等で入力確定タイミングを捕捉し、input要素ノードを `removeChild` し、`element.firstChild.data = text` でテキストノード値を書き換える
|
|
170
170
|
|
|
171
171
|
|
|
172
172
|
|
1
表現の修正
test
CHANGED
|
@@ -156,12 +156,6 @@
|
|
|
156
156
|
|
|
157
157
|
入力を行うには、input要素、textarea要素などの入力可能なパーツが必要です。
|
|
158
158
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
- [HTMLInputElement value - Google 検索](https://www.google.com/search?q=HTMLInputElement+value&ie=UTF-8)
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
159
|
例えば、次の処理工程が考えられます。
|
|
166
160
|
|
|
167
161
|
|
|
@@ -170,7 +164,7 @@
|
|
|
170
164
|
|
|
171
165
|
2. click イベントハンドラから、input要素をドキュメントに `appendChild`
|
|
172
166
|
|
|
173
|
-
3. 入力内容を
|
|
167
|
+
3. 入力内容を [HTMLInputElement.prototype.value`](https://www.google.com/search?q=HTMLInputElement+value&ie=UTF-8) で参照
|
|
174
168
|
|
|
175
169
|
4. 入力確定時にinput要素ノードを `removeChild` し、`element.firstChild.data = text` でテキストノード値を書き換える
|
|
176
170
|
|