バグ解消のためのコーディングサポートの仕事 [IT・通信・インターネット]

見積もり募集の結果

見積もり募集の内容

依頼主の業種

IT・通信・インターネット

依頼の目的・背景

【概要】
スマホで、テキストエリアにフォーカスした時、入力エリアが画面いっぱいに広がるアニメーションをつけました。

・フォーカス時：入力エリア画面いっぱい
・キーボードの完了をタップ：もとの大きさに戻る

このようなことをしたいです。
iOSのSafariで確認した結果、フォーカス時に立ち上がったキーボードのタイプによって上手く動作しません。

もし原因がわかる方いたらご提案お願いします。
詳細は下記にまとめました。

~~~

■ 立ち上がったキーボードがテンキーの場合
フルキーボードに変換して入力してから「完了」をタップしても元の大きさに戻らない

■ 立ち上がったキーボードがフルキーボードの場合
逆も然りです。
テンキーに変換して入力してから「完了」をタップしても元の大きさに戻らない

■ 例外的にうまく動作する場合
上記の条件で下記のパターンだけは元の大きさに戻りました。ですが、ほとんどの場合にはうまく動作しません。

・1文字入力
・改行
・完了
→OK

・1文字入力
・空白
・完了
→OK

■ コード
現状のコードを共有します。

==============
HTML
==============

<div class="form_area">
<form>
<textarea id="test" name="test" cols="28" rows="10" wrap="soft" placeholder="テキスト入力"></textarea>
</form>
</div>


==============
CSS
==============

.form_area {
padding: 20px 0;
width: 86%;
margin: 10% auto 0;
background:#ddd;
background-size:cover;
transition: all 0.5s;
}

#test{
font-size:24px;
line-height:150%;
width: 100%;
height: 54vh;
padding: 20px;
resize: none;
display: block;
margin: 0 auto;
}

#test:focus {
outline: 0;
height: 40vh!important;
}

.form_area:focus-within {
outline: 0;
margin-top: 0;
width: 100%;
height: 100vh;
transition: all 0.5s;
touch-action: none;
}

開発の継続性

今回のみ、開発をお願いいたします。

対応ページ数

ランサーに相談して決めたい

用意してある素材

ランサーに相談して決めたい

重視する点

予算、納期、クオリティ、柔軟な対応、業務経験・知識

希望スキル

HTML、CSS、JavaScript

希望CMS

ランサーに相談して決めたい

補足説明

設定なし

依頼内容を満たす提案が見つからなかったため