質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2546閲覧

input type="text"の入力値(value)がgetElementsByTagNameで取得できない

enoeno

総合スコア20

DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/11/18 07:16

編集2021/11/18 07:21

ブラウザー画面にボタンとラベル定数と入力ボックスがあります。現在はこれを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>のように取得できようにするにはどのような対策があるでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2021/11/18 07:24

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

2021/11/18 08:59

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

回答2

0

ベストアンサー

たとえばこう

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

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

0

innerHTML プロパティを取る前に、文書中の <input>value プロパティの値を value 属性にセットしてやると期待どおりになるかと思います。

投稿2021/11/18 07:23

int32_t

総合スコア20670

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

enoeno

2021/11/18 09:10

ご回答ありがとうございます。いつも勉強になります。 yambejpさんの回答が汎用的でサンプルも付いていたのでひとまずそちらを試してみることにしました。 またよろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問