cgi フォームでの入力文字形式指定

質問

perl cgiでフォームを作りました。
iphoneから、半角数字で小数を入力してほしいところにカーソルをもっていくと
ソフトキーボードが英数字に切り替わります。

カーソルをもっていくと半角数字とピリオドが選びやすいようなキーボードが表示されるように、htmlをかけないでしょうか？

回答No.3

4017B · ベストアンサー

改めて自分も色々と試して挙動を確認しましたが…確かにおっしゃる通り、inputタグ内に step属性を指定すると、そっちの方の設定が優先されてしまって type="number" を設定して置いても望んだ通りの挙動にならないですね。

従って現状では妥協して…

<input type="number" step="0.01" pattern="^[0-9]+(\.[0-9]+)?$">

～上記の様な記述例で暫定的に対応するしかないと思います。

P.S.
自分の環境下では正確にスマホの挙動をエミュレーション出来ないため、暫定的にsafariと同じwebkit系のchromeで確認するしか手立てが無いのですが。それだと質問の「数字キーボード」の挙動を実験できないので、これ以上の回答というかアドバイスは難しいですね。

それでもどうしてもより完璧な理想のGUIに近付けたいのであれば、やはり最初に申しました通りJavascriptを使って「自作の数字キーボード」を表示させるしか無いと思います。ただしそういったGUIの標準表示の仕方をwebサイト側で強引に上書きする事は、ある意味ではブラウザ側が本来想定している挙動を上書きしてしまう事になるため、もしかしたらセキュリティ的に危険なwebサイトと判断されるかも？

とにかく現状では如何ともし難いですね…

回答No.2

4017B

ああ、すいません。少し自分が質問内容を勘違いというか早合点してしまってたようで…。要は入力された内容を事前にチェックするとかでは無くて、物理的に「半角英数字とピリオドのみ」しか入力出来ない様にポップアップされる入力用の小ウィンドウに何らかの制限をかけたいって事だったんですね？

結論から言うとHTMLを弄るだけでは無理。Javascriptを使ってページ上の特定部位がタッチされた時に、それを動的に検出して自作した「半角英数字とピリオドのみのキーボード入力用のダイアログ」を別途出力させる様なプログラムを自分で作るしか方法は無いですね。

ある程度、中級者以上のHTMLとCSSとJavascriptの知識があり、尚且過去に似た様な何らかのwebサービス等の開発をやった経験が無いと。その様な仕様を実装させるのはかなり難しいと思います。自分もぼんやりとはイメージが浮かびますが、いざ作るとなるとかなり本格的に下調べしてコードを書いて実験等を繰り返さないとならないと思うので…

P.S.
現状、HTML5+CSS3で作れるのは前述の inputタグ内に type と pattern を指定し組み合わせる事で「数字のみ」か「それ以外」しか選べません(stepは数字のみの時のオプション)。

patternでの指定はあくまでも「入力された内容をチェックして、指定された正規表現に合致しない場合は注意喚起メッセージを出す」というモノなので。お望みの様な最初から「半角数字とピリオドのみが選べる入力ウィンドウ」みたいな事は出来ません。

お礼

丁寧なご回答ありがとうございました。
<input type="number" name="height" step="0.1"
と書くと確かに　数字キーボードが表示されます。
私としては、それだけでありがたいのです。
しかし、ここに188.11とか入力しようとすると、警告が表示されます。
じゃ、
<input type="number" name="height" step="0.01"
とかかくと、ブラウザによっては、数字記入欄の横にコントロールが
出現して、数字のアップダウンで入力できるようになります。
すると数字を直接入力できるということが 分からない人が出てきます。

<input type="tel" name="height"
だと整数しか入力できません。

私としては数字キーボードになってくれるだけでよいのですが。。。
桁数のチェックとかは不要なんですが。

回答No.1

4017B

該当するhtml部分は恐らく inputタグを用いられてるかと思いますので、

<input type="text" pattern="[0-9]*">
<input type="number" pattern="\d*">

～上記の様に pattern="*" を指定する事である程度、キーボード入力の範囲を絞れます。他の正規表現もある程度までは認識してくれます。

古いバージョンのiPhoneだと効き目無いけど、ここ2年以内のバージョンなら大丈夫だと思います。

補足

貴重な情報ありがとうございます。
<input type="number"
にするとたしかにキーボードが数字を含むものになります。
しかし、小数の入力を受けてるようにするには
<input type="number" step="0.1"
としないといけないと書いてあるサイトがありました。stepをつけると0.1刻みで増減させるコントロールが生成されます。
私はiPhone6 iOS 11.4.1を使っていますが、たしかに
キーボードが数字を含むものに変更されました。0.1ずつ増減させるコントロールは生成されませんでした。
しかしstepをつけて変なコントロールが生成されるのもいやだし、小数が受け付けられなくなるのも困ります。

<input type="number"　だけにしてpattern やstepを使わなかった場合
iOS 11.4.1以後のiOSおよびアンドロイドで、小数を数を受け付けてくれるでしょうか？
作るにはどうすればよいでしょうか？