[返信する]
テキストボックスが真っ白になる
By 波月
2011-04-28 22:43:19
こんばんは。
スマートフォンを利用しています。
普段あまりサイトを見ないので、いつからかは分からないのですが、
テキストボックスの背景が真っ白になってしまいます。
文字、枠の色は反映されています。
スマートフォンユーザーの方はわかると思いますが、テキストボックスをタップする前の、グラデーションのかかった角が丸い状態での時です。
以前はしっかり表示されていましたし、他のナノのサイトでも同じようになっていますので、恐らくバグのような気もしますが……

タグは

<form method="."><textarea rows="1" cols="15" style="background-color:#adbfd1;border-color:#adbfd1;color:#ffffff;"><a href="Ｈttp://Ｎanos.jp/ID/">サイト名</a></textarea></form>

※リンクタグの部分は実体参照を利用しています

です。
回答宜しくお願いします。

≫匿名様 スレ違い指摘ありがとうございました。
Android
[編集]
By Ruby◇ACAABC9C
2011-04-30 12:10:38
出先の為、テスト用Androidで確認できなくて申し訳なく、解決策になるかわかりませんが一応ご参考までに。

ナノさんのスマートホン向け設定は以下のようになっています。

■共通HEAD出力する設定にしている場合、スマートホンからアクセスすると出力されるソース
/*--- textarea --*/
textarea {
-webkit-box-shadow: 0px 1px 2px #808080;
-webkit-border-radius: 4px;
border: 1px solid #b2b2b2;
font-size: 14px;
width: 90%;
padding: 5px 1%;
height: 5em;
}

textarea:focus {
height: 10em;
}

上記のtextarea:focus {
height: 10em;
}の指定は、スクロールする時iPhoneの場合｢二本指フリｯク｣する為の指定です。
iPhoneだけの場合ならtextarea:focusだけでいいのですが､AndroidのXPERIAの場合はなぜか:focusが効かないようです｡
代わりにスマートホンには効かないと言われている:hoverも指定すると、双方有効なようで不思議な仕様です｡

:hoverの挙動としては指がタップ中に反応するのではなく、指をタップして離した瞬間onreleaseのような挙動をするようです｡

■HEAD・HTML詳細設定のHEAD欄に以下を記述して、CSSを上書きさせます。
<スマートホンにだけ表示する開始独自タグ><style type="text/css">
textarea {
height: 5em;
background-color:#〜;
color:#〜;
}
textarea:focus,
textarea:hover {
height: 10em;
background-color:#〜;
color:#〜;
}</style></スマートホンにだけ表示する終了独自タグ>
で、textareaにフォーカスしている時だけ､textareaの領域を縦に拡大しますし、背景色も表示すると思いますがいかがでしょうか｡

あと、テキストボックス内の「"」も実体参照にしていますか？

pc
[編集]
By 波月
2011-04-30 23:37:49
≫Ruby様 回答ありがとうございます。

教えていただいたタグを、headに入れてみましたが駄目でした。
<smartphone><style type="text/css">
textarea {
height: 5em;
background-color:#adbfd1;
color:#ffffff;
}
textarea:focus,
textarea:hover {
height: 10em;
background-color:#adbfd1;
color:#ffffff;
}</style></smartphone>

きちんと"も実体参照にしております。
head内に自分で入れているものは検索避けのmetaタグのみです。

webのソースを確認できるアプリで抜いてみたのですが、恥ずかしながらよく分からず……。
抜いてみたheadとbodyの共通部分(自分で書ける部分より上)を、次に書き込むので、気になった部分がございましたら指摘お願いします。

※head内の自分で書き込んだおぞましい量の検索避けタグは省かせて下さい。
※body内には、tableタグ、linkタグ、fontタグ程度しか入れてないのでテキストボックスには何ら関係ないかと。
※日本語が文字化けしてしまうアプリなので、<title></title>の中身が文字化けだらけなため、割愛させて下さい。

お手数おかけしますがどうかよろしくお願いします。
Android
[編集]
By 波月
2011-04-30 23:39:26
<!doctype html>

<html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name = "format-detection" content = "telephone=no" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="robots" content="noindex, follow" />

<link rel="stylesheet" href="/static/css/smartphone/common.css">
<link rel="apple-touch-icon" href="/favicon_sp.ico" />

<title></title>
</head>
<body bgcolor="#FFFFFF" text="#C0C0C0" link="#adbfd1" vlink="#adbfd1" alink="#cococo">

Android
[編集]
By Ruby◇ACAABC9C
2011-05-01 03:51:33
背景色指定が、bgcolo="ffffff"の白色で、質問者さんが記述されてる以下の
<form method="."><textarea rows="1" cols="15" style="background-color:#adbfd1;border-color:#adbfd1;color:#ffffff;"><a href="Ｈttp://Ｎanos.jp/ID/">サイト名</a></textarea></form>
ですと、文字色が白色指定ですから見えなくなるのではないでしょうか。私が提示しましたナノさんの設定CSSを上書きするCSSの、フォーカス時の文字色指定は白以外の色にしてみてはいかがでしょうか。
また、携帯の中でも一部の機種は、仕様によりページ背景色が白の場合、フォーカス時にテキストボックス内の文字色を白色にすると見えなくなります。alink色も他の色にして確認してみてください。
また、フォーカス時だけでなくページ背景色とテキストボックスの文字色は別の色を指定したほうが無難です。

あと、formタグにはaction属性が必須となっています。
<form action="."><p><textarea rows="1" cols="15" style="background-color:#adbfd1;border-color:#adbfd1;color:#〜白以外の色;"><a href="Ｈttp://Ｎanos.jp/ID/">サイト名</a></textarea></p></form>
それから、textareaはインライン置きかえ要素なので上記のようにブロックレベル要素で包括し、子要素としたほうが良いとされてます。
そして余談ですがページ背景色、文字色、リンク色指定はHEAD欄にCSS指定が良いと思います。

以上ですが、解決できない場合はAndroid利用者の方々のご回答をお待ちください。
出先のため、スマートホンから確認できなくすみません。

pc
[編集]
By たすけあい
2011-05-01 22:18:34
横からすみません。
Android端末はいくつか種類がありますから、どのAndroidなのか提示したほうが同じAndroidユーザーが回答できていいかもしれないです。Android端末は仕様がけっこう異なるので。

追記
metaタグで沢山の検索避けはスマホも重くなります。
また、レイアウトにtableタグはスマホには向かないです。
943SH
[編集]
[1-10表示]
[返信する]
[新規トピ]
[戻る]
無料HPエムペ！