iPhone/safariでinput type=numberでマイナスの数値を入力する方法

#0. 今回お話しすること

• 数値（正負両方）しか入力しないフィールドを作り、キーボードの初期選択を数値キーボードにしたかったよ
• input type=telだとキーボードにマイナス記号がなかったのでinput type=numberにしたよ
• focus時に数値キーボードが初期表示されるようになったけど、iPhone/safariだとマイナス記号が入れられなくなったよ
• どれだけ検索しても解決策が見つからなかったけれど、妙案（苦肉の策）を思いついたよ

#1. どうやったか
まずは肝となる部分のソースを記載します。
※実はこのままの記述だと、android/chromeでは不都合があります。（後述）

HTML

<input type="number" id="target" />

Javascript

$("#target").focus(function(){
	$(this).prop("type", "text");
});
$("#target").blur(function(){
	$(this).prop("type", "number");
});

#2. どんな考え方なのか
input type="text" だと、focus時に英字キーボード（数字が表示されていないキーボード）が表示されてしまいます。数値しか入力しないようなフィールドの場合、ユーザがキーボードを切り替えるひと手間はなくしてあげたいですよね。なので、focus時にはinput type="number" であってほしいわけです。

ですが、文字を入力し始めたときにinput type="number" だと、はじめにマイナス記号を入力した時点で入力規則にひっかかるのか強制削除されてしまいます。なので入力をし始めた時には自由なinput type="text" であってほしいわけです。

・・・なら、focus時にtype変えちゃえばよくない？

という解決法です。

#3. この記述の不都合
iPhone/safariではこの記述で問題なく動くのですが、android/chromeだとfocusしてもキーボードが表示されなくなってしまいます。focusイベント内でtypeを変えるのが気に入らないのでしょう。なので実際に使うときには

$("#target").focus(function(){
	if(navigator.userAgent.indexOf('Android') == -1){
		$(this).prop("type", "text");
	}
});

のような形でAndroidを省くか、逆にiPhone, iPadのみ動作するようなif文で囲ってあげましょう。