###前提・実現したいこと
「safariでinput要素の文字列がオーバーしたとき、スクロールができない」バグについて改善予定日が知りたいのですが、どのように調べてよいのかわかりません。
バグの対処法については、過去に投稿してありましたこの方→(https://teratail.com/questions/40038)のベストアンサーで知ることができましたが、①改善する予定日や、②対処できるjQueryやJavascript等、①②に関する詳しい事などをご存知の方がいらっしゃいましたらご教授ください。
今回のようなレアなケースの情報はググっても日本語のページではめぼしい情報を見つけらず、現在私は英語を少し勉強しておりますが、海外の方が英語で書かれている情報を正確に翻訳できず困っています。(英語で書いてあるWeb情報の方が、進んでいるとどこかのHPで読みました。)
改善の進捗情報などの情報がここに書いてある。もしくは、最新の対処策はここ。等の英語サイトでもかまいせんので、情報がわかる方がいらっしゃいましたら教えて下さい。よろしくお願いします。
###発生している問題
現在、スマホ対応のページを作成しているのですが、iPhone 5Cでinput要素の文字列がオーバーしたとき(iphoneを縦に持って、住所入力欄で住所がはみ出る)、スクロールが動作せず、オーバーした部分の文字列の内容が確認できないことがわかったのですが、これがバグであった。
###該当のソースコード
全部のソースコードは長くなるので、該当部分に関連しないところは削除してあります。
以下が該当ソースコード(HTMLとCSS)です。
郵便番号に〒602-8303を入力すると住所がはみ出ます。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta http-equiv="X-UA-Compatible" content="IE=edge"> 6<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no"> 7<title>配送設定</title> 8<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> 9<link href="style.css" rel="stylesheet"> 10</head> 11<body> 12<div id="shop_form_deliver"> 13 <div id="shop_form_deliver_new"> 14 <hr> 15 <h3>2.配送設定</h3> 16 <p>下記フォームにお届先情報を入力後、OKボタンを押してください。</p> 17 <h4>お届け先</h4> 18 <hr> 19 <form action="#" method="post" class="h-adr"> 20 21 <div id="deliverBox"> 22 <dl class="clearfix"> 23 <dt>郵便番号</dt> 24 <dd id=postal> 25 <span class="p-country-name" style="display:none;">Japan</span> 26 〒<input name="deliver_postal1" id="deliver_postal1" type="text" class="p-postal-code" size="8" maxlength="3" placeholder="例)123"> 27 ―<input name="deliver_postal2" id="deliver_postal2" type="text" class="p-postal-code" size="10" maxlength="4" placeholder="例)4567"> 28 <p class="postal_caution">※郵便番号を入力すると、自動で住所が反映されます。</p> 29 </dd> 30 </dl> 31 32 <dl class="clearfix"> 33 <dt>住所</dt> 34 <dd> 35 (都道府県&市区町村&町域)<br><div id="jscroll"><input name="deliver_address1" id="deliver_address1" type="text" class="p-region p-locality p-street-address" placeholder="例)東京都港区芝公園"></div> 36 (以降の住所)<br><div id="jscroll"><input name="deliver_address2" id="deliver_address2" type="text" class="p-extended-address" placeholder="例)1-1-1 青空マンション101号"></div> 37 </dd> 38 </dl> 39 </div> <!-- deliverBox end --> 40 41 <div class="transmission"> 42 <input type="button" onclick="history.back()" value="戻る"> 43 <input class="btn_submit" id="btn_submit" type="submit" value="OK(支払い設定へ)"> 44 </div> 45 46</form> 47</div> <!--shop_form_deliver_new end--> 48</div> <!--shop_form_deliver end--> 49</body> 50</html>
style.cssの中身
CSS
1#shop_form_deliver_new dl dd input[type="text"]{ 2 max-width: 100%; 3 font-size: 18px; 4 height:30px; 5 padding: 3px 0 3px 10px; 6 margin:0; 7} 8 9div #jscroll{ 10 width: 210px; 11 height:30px; 12 font-size: 18px; 13 overflow:scroll; 14 -webkit-overflow-scrolling: touch; 15}
###試したこと
①cssの変更
input要素の前にdivを設定して、そのdivのcssに以下の内容を記入してみるが、input要素をタップして、スクロールしてみようとしますが、オーバーした部分の文字列の内容が確認できずでした。
CSS
1div #jscroll{ 2 width: 210px; 3 height:30px; 4 font-size: 18px; 5 overflow:scroll;/*これ*/ 6 -webkit-overflow-scrolling: touch;/*これ*/ 7}
②以下サイトのjQueryプラグインを試してみるが、<p>,<li>要素が羅列してある時のみ有効でした。<input>要素の1つの要素に対してスクロールバーを表示させることはできませんでした。
http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_scroll
などです。。
###実行環境
端末:iPhone 5C
ブラウザ:safari 8.0
OS:iOS 8.0.2
回答1件
あなたの回答
tips
プレビュー