inputのinnerHTMLを取得してもvalue値は取得できない件

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

PWAサービスを構築する際にHTML操作を柔軟に行わなければいけません。
 

基本的にはw3cを熟読しておくことをオススメしますが、こうした規約は都度更新されていくので、情報収集を欠かせないようにしないとすぐに遅れをとってしまいます。
 

そして、そうした事を理解していたつもりで、あるサービスでinnerHTMLを使って、入力フォームを別の入力エリアにコピーしようと思い、HTMLソースを取得したところ、value値がどうしてもついてこない事に気が付きました。
 

innerHTMLでvalue値が反映されない件


 

 

これはとあるサービスのログイン画面のメールアドレス入力欄なのですが、inputタグを囲んでいるdivタグのinnerHTMLを取得すると以下のようになります。
 

 

この時点では何の問題もないのですが、実際に文字が入力されたinputタグでは下記のようになります。
 


 

 

value値が取得できません。
 

コマンドで入力されたvalue値だとどうでしょうか?
 

 

どうあがいてもvalue値は取得できないようです。

属性は問題なく取得できる

他の属性についても試しに取得してみます。
 

 

問題なく反映されています。
 

やはりvalue値はセキュリティの問題もあり、取得できないのでしょう。
 

以前はpasswordなどの文字列も、コンソールで確認することができたんですけど、そうした事でセキュリティ警告があったんでしょうか?

innerHTML以外であれば取得できる


 

 

innerHTMLでのセキュリティは理解できたのですが、上記のように、直接属性を取得してみると、入力されている文字列を取得することは可能です。
 

そうしたことから、今回のようにinnerHTMLで要素をコピーする場合は、value値はその後に別途手動でコピーしてあげる処理が必要であることを理解できました。
 

う〜〜ん、そのうちinnerHTML事態が無くなるってことはないだろうな・・・
そうなると今作っているプログラムがゴミになってしまう・・・

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です