タグ・デザイン掲示板

[

スマホでメールフォームの入力欄をリサイズしたい
by ７

2016-02-24 18:30
「テキストエリア　サイズ」で検索したのですが求めるものがヒットしなかったので。

タイトルの通りです。
メールフォームのメッセージ入力欄やこのサポート掲示板の入力欄もそうですが、PCからだと右下の角の斜線の辺りを引っ張れば自由にサイズを変えることができますよね。
でもそれがスマホからの閲覧になると、リサイズどころか斜線すら表示されません。
入力欄をタップしてフォーカスすると自動的に少しだけ枠が拡大されますが、そのあとはまったくサイズを変えられないのです。
ブラウザによっては斜線は表示されるのですが、やはりまったく動かせません。(他サーバーのサイトさんでは正常にリサイズできたので私のタップ操作が下手というわけではないと思います。)
自分なりに調べてみたところ、resize:both;を入れればいいだとか(試しましたが変化なし)、そもそもCSSのtextarea要素には最初からリサイズ機能が付いているはずだとか(何故スマホでは反映されないのかまでは結局わからず)、調べれば調べるほどこんがらがってきてしまい、こちらに助けを求めました次第です…。
ちなみに対象のメールフォームはナノさんのデフォルトのものを使っています。

スマホで反映させる方法をご存知の方、もしよろしかったらお知恵をお貸しください。

pc
[編集]

by 匿名

2016-02-25 16:01
スマホ向けに出力されている外部cssに「textarea:focus」があります。タップ、またはクリックしたときの指示です。
他サーバーとの違いはここかなと思うので（もちろん違う可能性もありますが）

textarea:focus { height: auto; }

で、上書きしてみてください。

参考までに外部cssを添付してきますね。
http://nanos.jp/static/css/smartphone/common.css

pc
[編集]

by と

2016-02-26 17:52
テキストエリアのリサイズはfirefoxとかchrome 、safariといったPC向けブラウザの仕様ではないでしょうか？
書き出されているresizeはbothが初期値のようですから、リサイズ出来るブラウザならそのプロパティと値を書き込まなくてもリサイズ出来るようになっていますし、元々リサイズに対応していないブラウザならいくらプロパティと値を書き込んでも変わらないと思います。
また、スマホでもリサイズ出来るtextareaを探してみたところjqueryでieに対応というものがあったのですが、いくつかのリファレンスサイトのサンプルで試してもiPhoneでは全く機能しませんでした。
同じくjqueryで入力行数によって自動で伸びてゆくテキストエリアというものもありましたが、こちらはある程度伸びると入力欄がキーボードの下に隠れてしまって、打ち込んだ文字が確認出来ず非常に使いにくいものとなっていました。

スレ主様がご覧になったサイトのソースは確認されましたでしょうか？プログラム等だとソースに出てこないので仕組みが分からないかもしれませんが、cssでやっているならソースを見れば何かヒントがあると思います。

追記
Androidでも反映しないのですね。
iPhoneはだめでももしかしたらAndroidはいけるのかな？と思っていたのですが…。
大変勉強になりました。こちらこそありがとうございました。

pc
[編集]

by ７

2016-02-26 21:11
>匿名様
ご回答ありがとうございます！
早速試してみたのですが、やはり変化はありませんでした……。

>と様
ご回答ありがとうございます！
私も調べた中でjqueryは色々見てみたのですが、と様と同じく自機androidでもまったく機能しませんでした。
件のサイトのソースを見てみたのですが、テンプレートサイトのテンプレを管理人さんご自身がごちゃごちゃ弄ってしまったようで、どのCSSがどこに反映されているやら訳がわからない……といった感じでした。
さすがに他人様のサイトのソースを晒すわけにもいきませんし、他サーバーのサイトのCSSを無理やり紐解いて組み込んで何か不具合が起きても困るので、今回は諦めることにいたします……。

お二方、ご協力くださりありがとうございました。

pc
[編集]

[