PWAサービスを構築する際にHTML操作を柔軟に行わなければいけません。
基本的には
w3cを熟読しておくことをオススメしますが、こうした規約は都度更新されていくので、情報収集を欠かせないようにしないとすぐに遅れをとってしまいます。
そして、そうした事を理解していたつもりで、あるサービスでinnerHTMLを使って、入力フォームを別の入力エリアにコピーしようと思い、HTMLソースを取得したところ、value値がどうしてもついてこない事に気が付きました。
innerHTMLでvalue値が反映されない件
<div class="input-group">
<span class="input-group-addon">メール</span>
<input class="form-control" type="text" name="login_mail" value="" autocomplete="new-password">
</div>
これはとあるサービスのログイン画面のメールアドレス入力欄なのですが、inputタグを囲んでいるdivタグのinnerHTMLを取得すると以下のようになります。
> document.querySelector("input[name='login_mail']").parentNode.innerHTML;
<span class="input-group-addon">メール</span>
<input class="form-control" type="text" name="login_mail" value="" autocomplete="new-password">
この時点では何の問題もないのですが、実際に文字が入力されたinputタグでは下記のようになります。
> document.querySelector("input[name='login_mail']").parentNode.innerHTML;
<span class="input-group-addon">メール</span>
<input class="form-control" type="text" name="login_mail" value="" autocomplete="new-password">
value値が取得できません。
コマンドで入力されたvalue値だとどうでしょうか？
> document.querySelector("input[name='login_mail']").value="test@example.com";
> document.querySelector("input[name='login_mail']").parentNode.innerHTML;
<span class="input-group-addon">メール</span>
<input class="form-control" type="text" name="login_mail" value="" autocomplete="new-password">
どうあがいてもvalue値は取得できないようです。
属性は問題なく取得できる
他の属性についても試しに取得してみます。
> document.querySelector("input[name='login_mail']").setAttribute("data-sample","SAMPLE");
> document.querySelector("input[name='login_mail']").parentNode.innerHTML;
<span class="input-group-addon">メール</span>
<input class="form-control" type="text" name="login_mail" value="" autocomplete="new-password" data-sample="SAMPLE">
問題なく反映されています。
やはりvalue値はセキュリティの問題もあり、取得できないのでしょう。
以前はpasswordなどの文字列も、コンソールで確認することができたんですけど、そうした事でセキュリティ警告があったんでしょうか？
innerHTML以外であれば取得できる
> document.querySelector("input[name='login_mail']").value;
"test@example.com"
innerHTMLでのセキュリティは理解できたのですが、上記のように、直接属性を取得してみると、入力されている文字列を取得することは可能です。
そうしたことから、今回のようにinnerHTMLで要素をコピーする場合は、value値はその後に別途手動でコピーしてあげる処理が必要であることを理解できました。
う〜〜ん、そのうちinnerHTML事態が無くなるってことはないだろうな・・・
そうなると今作っているプログラムがゴミになってしまう・・・
0 件のコメント:
コメントを投稿