ブラウザー画面にボタンとラベル定数と入力ボックスがあります。現在はこれをIE6で表示しているアプリがあり、Edge化を目指しています。

ボタンを押すとこのhtml内の全データをgetElementsByTagName('html')で取得してサーバーに送信する処理になっています。

※追記DOCTYPEにHTML 4.01が指定されていたのでHTMLのバージョンは4です

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<script>
function reqestHardcopy() {
	var printData  = document.getElementsByTagName('html')[0].innerHTML;
	console.log(printData);
	//send printData to server
}
</script>
<input type="button" onclick=reqestHardcopy() value="button">
<p>Input Data</p>
<input type="text">

上記のソースのconsole.logの内容を見るとIE6では入力値の"123456"が取得できていますがEdgeだと取得できなくなりました。

IE6のconsole.log

<HEAD>
<META content="text/html; charset=UTF-8" http-equiv=Content-Type>
<META content=IE=8 http-equiv=X-UA-Compatible
<SCRIPT>
function reqestHardcopy() {
	var printData  = document.getElementsByTagName('html')[0].innerHTML;
	console.log(printData);
	//send printData to server
}
</SCRIPT>
</HEAD>
<BODY><INPUT onclick=reqestHardcopy() type=button value=button> 
<P>Input Data</P><INPUT value=123456></BODY>


Edgeのconsole.log

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8"><script>
function reqestHardcopy() {
	var printData  = document.getElementsByTagName('html')[0].innerHTML;
	console.log(printData);
	//send printData to server
}
</script>
</head><body><input type="button" onclick="reqestHardcopy()" value="button">
<p>Input Data</p>
<input type="text"></body>

おそらくはgetElementsByTagNameの仕様が変わっているのだと理解はしていますが、アプリの互換性を保つという要件を実現しなければなりません。

アプリの互換性を保つためにEdgeでも<INPUT value=123456>のように取得できようにするにはどのような対策があるでしょうか?

yambejp

2021/11/18 07:24

データの互換性だけ担保すればよいですね？（新しいソースがIE6で動かなくても問題ないか？）

enoeno

2021/11/18 08:59

IE6で動かなくなってもかまいません。

行動規範の内容に同意します

回答2件

ベストアンサー

たとえばこう

javascript
1<script>
2document.addEventListener('input',e=>{
3  const t=e.target;
4  if(t.closest('[type=text]')){
5    t.addEventListener('input',()=>{
6      if(t.value){
7        t.setAttribute('value',t.value);
8      }else{
9        t.removeAttribute('value');
10      }
11    });
12  }
13});
14function reqestHardcopy() {
15  var printData  = document.getElementsByTagName('html')[0].innerHTML;
16  console.log(printData);
17}
18</script>
19<input type="button" onclick=reqestHardcopy() value="button">
20<p>Input Data</p>
21<input type="text">

textarea対応

javascript
1<script>
2document.addEventListener('input',e=>{
3  const t=e.target;
4  if(t.closest('[type=text]')){
5    t.addEventListener('input',()=>{
6      if(t.value){
7        t.setAttribute('value',t.value);
8      }else{
9        t.removeAttribute('value');
10      }
11    });
12  }
13  if(t.closest('textarea')){
14    t.addEventListener('input',()=>{
15      t.textContent=t.value??'';
16    });
17  }
18});
19function reqestHardcopy() {
20  var printData  = document.getElementsByTagName('html')[0].innerHTML;
21  console.log(printData);
22}
23</script>
24<input type="button" onclick=reqestHardcopy() value="button">
25<p>Input Data</p>
26<input type="text">
27<textarea></textarea>

投稿2021/11/18 07:32

編集2021/11/18 10:59

yambejp

総合スコア116835

enoeno

2021/11/18 09:08

なるほど勉強になります。さっそくこれをベースにザザッとアプリの動きを一通り確認してみます。

enoeno

2021/11/18 10:31

お世話になります。試してみました。ひとつだけうまくいかないところがありました。 input type="text"だけかと思ったら、複数行入力可能にしているtextareaタグも存在するようです。 IE6ですと、<textarea ～>123456</textarea>のようになりますが、今回の追加処理ではこうはなりませんでした。 if(t.closest('[type=text]')){なのでこれは理解していましたが、問題はvalue=という形ではないという点でこれに頭を悩ませております。 input type="text"とtextareaを一度に捌ける処理などないでしょうか?

yambejp

2021/11/18 11:00

チェックボックス、ラジオボタン、セレクトボックスなども課題がありそうですね

enoeno

2021/11/18 11:21

ありがとうございます。私なりにも考えてみましたがいかがでしょうか? document.addEventListener('change',e=>{ const t=e.target; if(t.closest('[type=text]')){ t.setAttribute('value',t.value); //未入力時はvalue=""でよい } if(t.closest('textarea')){ t.textContent=t.value??''; } });

enoeno

2021/11/18 14:17

あれから結構テストしてみました。いけそうな感じでした。感謝しつつベストアンサーに選ばせていただきクローズしたいと思います。ありがとうございました。

行動規範の内容に同意します