ダリの雑記：WEBプログラム版

この記事は1年以上前の記事のため、内容が古い可能性があります。

例えば、以下のようにタグ内に数値が含まれているとします。

<div id="float_num">25.1234567</div>

これをjavascriptのinnerHTMLでデータを取得すると、float型の小数を取得することができます。

get_num = document.getElementById("float_num").innerHTML;

もし、これを文字列として受け取ってしまった場合でも、parseFloatでfloat型にキャストしてあげれば問題なしです。

get_num = parseFloat(get_num);

さてここからが問題です。こちらにサンプルを用意しました。このサンプルは

1. 「id="float_num"」のタグから数値を取得
2. 取得した数値をparseFloatでfloat型にキャスト。
3. その結果を「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"/>

これで電話番号への自動リンクが無効化されます。

今回参考にさせていただいたサイト

• JavaScript++かも日記：該当記事【JavaScript】正規表現メモ タグ抽出とタグ除去
• とあるエンジニアの日常：該当記事「iPhone Safariの固有仕様を調べてみる」