タグ：iPad
iPad向けサイトにてjavascriptを使用する際の注意事項
例えば、以下のようにタグ内に数値が含まれているとします。
<div id="float_num">25.1234567</div>
これをjavascriptのinnerHTMLでデータを取得すると、float型の小数を取得することができます。
get_num = document.getElementById("float_num").innerHTML;
もし、これを文字列として受け取ってしまった場合でも、parseFloatでfloat型にキャストしてあげれば問題なしです。
get_num = parseFloat(get_num);
さてここからが問題です。こちらにサンプルを用意しました。このサンプルは
- 「id="float_num"」のタグから数値を取得
- 取得した数値をparseFloatでfloat型にキャスト。
- その結果を「id="text"」のタグに出力する
という簡単なものです。
パソコンで見る分には何の問題もないでしょう。以下のように出力されるはずです。
25.1234567
以下出力結果
25.1234567
しかしipadで見た場合は
25.1234567
以下出力結果
NaN
という風に、数値にはリンクが張られ、出力はNaNになってしまいます。
なぜかiPadでは特定の桁の数値にリンクを自動的にはってしまうという非常にありがた迷惑な機能があるようです。（もしかしたら設定で解除できるかもしれませんが）
リンクタグ入りの数字をparseFloatしても当然正常な数値は返ってきません。
そこで、データを取得後、replaceで余計なタグを取り除きます。
get_num = document.getElementById("float_num").innerHTML;
get_num = get_num.replace(/<\/?[^>]+>/gi, "");
get_num = parseFloat(get_num);
※replaceの記述は「JavaScript++かも日記」さんのサイトのスクリプトを参考にさせてもらいました。
上記の処理をほどこしたサンプルはこちらになります。
これでiPadでも出力結果が正常に出力されます。
追記
iPadに限らず、iPhoneのsafariでも同様に、電話番号らしき数字にリンクを自動的に入れる機能が付いているそうです。上記に記述した方法でも解決できますが、もっと簡単な方法がありました。参考は「とあるエンジニアの日常」さんのサイト。
メタタグで以下のように記述すれば良いみたいです。
<meta name="format-detection" content="telephone=no"/>
これで電話番号への自動リンクが無効化されます。
今回参考にさせていただいたサイト
nandani | 2010年08月11日 | コメント(0) | トラックバック(0) | JavaScript関連