iphoneとonFocus（JavaScript）

エクセルで時間の計算をするとき、素の状態でそれをしようとすると時間部分と分部分の間にコロンを入れて計算させなければなりませんよね。
例えば11時35分から13時15分の間の時間が知りたいとすれば、入力する計算式の基本構造は（セル参照させるとしても）
=13:15 – 11:35
となるわけです。

ところでこの「：」が間に入ると、当然入力はテンキーだけで行えません。
で困ったことに、私の職場のご年配の方々やITリテラシの低い方々はこれがどうにも我慢ならないらしく、PC（エクセル）を使わずに暗算したり筆算したりして、結果的に計算ミスが多発する・・・という悪循環の環境が発生してました。

で、仕方がないので「勤務時間外に（つまり家に帰ってきてから）」エクセルで文字列操作の関数などを駆使してこの「：」を入れなくても時間計算ができるようにシートを作成しました。
つまり入力をテンキー部分だけで完了できるようにしたわけです。
先の例なら、
=1315 – 1135
という式（入力値）で行えるようにして、だいぶ状況が好転しました。

ところが人間というのは欲深なもの。
仕事ではこの計算結果を実稼働時間として様々なフォームに入力しなければならないのですが、この入力を行えるPCの台数が人員に対して圧倒的に少ないんです。
そうすると、PCを使わなくてもできるようにならない？みたいな相談が。
要するに、スマホ使ってできるようにしてよ（＝アプリ作ってよ）、みたいな要望が出てくるわけですョ。
私はITスキルもリテラシもそれなりに高いので（少なくとも現在の職場の中ではトップクラスなのは間違いない。トップかどうかは知らないが）、必然的にこうした要望が私の所に（アンオフィシャルに）くるわけですが、私はそれでお給料をもらっているわけじゃないんですけどね・・・(~_~;;

エクセルの関数によるシート作成だってある意味じゃコンテンツ作りですが、膨大な数の自治体が故やなせたかしさんに無償で作品を作らせていたなんてニュースを見ると、やっぱり日本人って具体的な（というか、物理的な）「モノ作り」でないものはなんの労苦もなく「あっという間に」、しかも「無料で」できる、もしくはできて当然だという意識があるんでしょうね。
だから少しITの知識がある人が部署内にいると、その人に正当な対価を支払うこともなくエクセルシートを作成させたり、外部プログラムを作成させたりする。しかもそれは業務以外の時間にやって当然、みたいな感覚なんでしょうね（だって簡単にできるんでしょ？みたいに言われることも多い）。

・・・と、まぁなんとなく愚痴っぽくなってしまいましたが（っていうか、愚痴なんですけどね）、それでも仕事で世話になっている人もいるわけで、そうした人からの要望であればまぁ少しは頑張ってみようかと。

とは言っても、さすがにアプリを作るための勉強を一から始めようとは今のところ考えてません。
だいたい、アプリにしてしまうとAndroidとiOSのそれぞれで作成しなければなりませんし、そもそも時間の計算ができればいいだけの単純な処理ですから、それだけのために専用アプリを作る（その勉強を始める）のはどうなのかと。

というわけで、どうせスマホで使うことを想定しているなら、みんなブラウザも含めて通信環境を持っているわけだから、HTMLとJavaScriptでなんとかなんじゃね？と決めつけて考えてさっそく取りかかることに。
ちなみにどこでそのHTMLを公開するのさ・・・という質問への回答は、結果的に自前サーバにせざるを得ませんよね。こんなところでも個人的なリソースを提供するわけですが、サイバースペースみたいなものも結局具体的な「モノ」じゃないから無尽蔵に無料で涌いて出てくる・・・ときっと思ってますよね・・・orz

で実際に作り始めてみたわけですが（ま、やりはじめればそれはそれでおもしろい）、色々調べ直したりして（私の知識はHTML4.xで止まってます）まぁそれなりの形のものが出来上がり、動作確認のため複数のプラットフォームで試験してみることに。すると・・・。

ちなみに実験環境は（なぜか）Firefox on CentOS 6.x、IS05（標準ブラウザ on Android 2.3）、iphone5s（Mobile Safari on iOS 7.0.3）。
ま、PCのそれは作業環境上での動作確認ですから実験環境とはちょっと毛色が違いますが、それにしてもAndroidとiOSだとずいぶんと挙動が違う部分があるのですね。

でようやくタイトル部分の話になります（笑）

作成したHTMLページではinputタグでテキストボックスを配置してあります（ただし入力するのは数字だけなので、typeはtextではなくtelにしてある。これはスマホのソフトキーボードを数字だけのキー＝テンキーにするため）。一つのボックスに入力したら次のボックスに移動させるわけですが、計算結果を返すボックスにフォーカスが移ると困るので、必要な箇所にはdisabledをつけてフォーカスから除外。
その上で、入力を楽にするようにonFocus=”javascript:this.select()”の指定をしました。
こうすることでフォーカスが移ると同時にデフォルトで入力されているボックス内のテキスト（計算させる関係上、デフォルトで0を入れている）がCtrl+Aと同じ状態になるようになっています。
PC上ではまったく問題なくフォーカス移動と同時にテキストが選択されました（ま、これはあたり前ですよね）。そしてAndroidでも問題なくフォーカスが移動し、テキストが選択された状態になりました。
お、なかなかいけんじゃね？

この「テキストが選択された状態」になっていることが実は重要で、こうなっていればそのままテンキーで目的の数字を打ち始めることができます。
ところがもしテキストが選択されない状態でフォーカスが移動してしまうと、デフォルト値の0が残ったままになり、テンキーで入力する前に一度この0を削除すると言う手間が発生してしまいます（そしてソフトキーボードにはbackspaceはあるがdeleteはない！）。

PCでもAndroidでもこの余計な手順が発生しないので、よしよしと思っていたら！

iOSではOnFocus指定がうまく動作しませんでした・・・orz
どうもあっちこっちで同じような情報が上がっている所を見ると、そういう仕様・・・なのかも・・・？

とりあえずは職場のスマホ率は圧倒的にandroidなのでこれはこれでOKということで、数少ないiphoneユーザ用には（そして何を隠そう、私もそこに含まれる！）ちょっと我慢してもらいましょう。

こっちは自分の時間を使って仕事に必要なものを作っているんだから、それくらいのわがままは、許されて当然ですよね！？

あ、ちなみにページを開いたときに最初のボックスが選択されるように「onLoad=”document.formname.name.focus()」をbodyタグに指定してみましたが、こちらはAndroidでもiOSでもうまく機能しませんでした（PCでは問題無し！）。