textareaフォーカス時に画面回転するとフォーカスを外す

Question

スマホ、タブレット限定なのですが
textareaをフォーカスしている時に画面回転するとフォーカスが外れて、キーボードが消えるようにしたいです。
フォーカス　→　縦横判断　→　回転検知　→　ブラーというふうに考え下記のように実装したのですが
最初の回転しかうまくいきません。
解決方法ございましたら、ぜひ教えてください。

－実装方法
縦横の判断にはscreen.orientation.angleを使用し
フォーカス時に毎回角度を確認し、回転したあとの角度と比較しています。

ーエラー
コンソルを見るとline6とline9の数値が違います。
line6は毎回フォーカスされる度の角度を取っているようですが、line9は初期の角度を取っている気がします。

※Androidなのでキーボード出現により、毎回リサイズ扱いになります。

<textarea id="textarea"></textarea>

1      var textarea_focus = document.getElementById('textarea');
2      textarea_focus.addEventListener('focus',focusTextarea);
3
4      function focusTextarea(){
5        let defalt_screen_angle = screen.orientation.angle;
6        console.log(defalt_screen_angle);
7
8        window.addEventListener('resize',()=>{　　//フォーカス時に回転
9          console.log(defalt_screen_angle);
10         console.log(screen.orientation.angle);
11         if (!(screen.orientation.angle === defalt_screen_angle)) {
12           textarea_focus.blur();
13         }
14       });
15     };

Comments

[kei344]

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

[nana_ton]

エラーの謎が解けていなかったので回答者の方の返信待っていました。
すぐに来ていたようですが、何故か返信の通知が来なかったので、全く気付かず。。
kei344さんからの通知で気付けました。ありがとうございます。

Answer 1

resize イベントと orientationchange イベントとを分離し、
変数宣言 let defalt_screen_angle をグローバルスコープで行う実装にしてはいかがでしょう。

イベント発生の条件が異なる場合、グローバルスコープなど、イベントリスナの外で値を保持するとうまく行きます。

例えるなら、マウスイベントですが、丁度、こちらで回答させていただいたことがあります。

Comments

[nana_ton]

コメントありがとうございます！
グローバルスコープだと、読み込み後の値をずっと保持という認識なのですが
回転されても値は変わってくれないのではないでしょうか。
フォーカスされた時の角度とその後の回転による角度の比較をしたかったので
縦0°（フォーカス時）→横90°（回転後）とし、その後横90°（フォーカス時）→縦0°（回転後）ということもあるので
フォーカス時の角度もその都度、更新されていきたいです。

orientationchangeというイベント調べました。
長々とコード書いていましたが、
window.addEventListener("orientationchange", function() {
textarea_focus.blur();
});
これで解決しました！
ありがとうございます！

[AkitoshiManabe]

> グローバルスコープだと、読み込み後の値をずっと保持という認識
そのとおりです。書き換わるのであれば、default_ という文字の無い命名が分かりやすいと思います。
> これで解決しました！
ご自身でお調べになっての解決ですので、コメント後半部分は自己解決を投稿されると良いでしょう。

[nana_ton]

ほぼ答えをいただいた状況ですがこちらで解決法更新しました！お力添えありがとうございます！

解決はしたのですが、
「書き換わるのであれば、default_ という文字の無い命名が分かりやすい」というのが
私の浅い知識では理解できず、、
検索ワードのみでも教えていただければ自身で調べますので、よろしければお願いいたします！

[AkitoshiManabe]

default は 何もしないときに設定される「固定された値」を印象付ける語ですので、あとから考えるなら アンダースコア（__） をプレフィックスしておくとかですね。

[nana_ton]

すみません
通知が来ず、ご返信に今気付きました、、
何もしないときに設定される「固定された値」調べてみます！
ありがとうございます。

Answer 2

回答者の方のおかげで
以下のようにシンプルで解決いたしました。

var textarea_focus = document.getElementById('textarea');
window.addEventListener("orientationchange", function() {
　textarea_focus.blur();
});