--------(--)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2012-10-05(Fri)

ASP.NET(.NET Framework 3.5)でHTML5のinput type="number"を使いたい。

ASP.NET(.NET Framework 3.5) + JQuery Mobileで、スマホ・タブレット用データベースアプリを作る際に、HTML5で追加されたinput type="number"を使い数字の入力を行うと便利だと思い、<asp:TextBox>タグにtype="number"
と書いてみたのですが、最終的なHTMLではtype="text"とtype="number"の両方がついており、単純なテキスト入力にしかなりませんでした。

.NET Framework4.0では対応可能なようですが、今回は3.5です。
とりあえず以下の方法で対応を検討中ですが(まだ動作未検証なので動くかどうかも分かりません)、何か他にいい手はないでしょうかね。

<input id="txtNumber" type="number" value="<%=hiddenNumber.Value%>" onblur="hiddenNumber.value = txtNumber.value;" />
<asp:HiddenField ID="hiddenNumber" runat="server" />

※サーバー側では、HiddenFieldにアクセスして値を取得予定です。


ちなみに、input type="number"を使うと、Androidではテンキーボードが表示されましたが、iOSでは何ら変化がありませんでした。
ただ、数字以外は入力できなくなるようなので、それなりに便利のような気がしています。


そもそもASP.NET + JQuery Mobile自体が正しくない選択肢だと思います。
ASP.NET MVCやクライアントサイドAjaxなど、他にいい方法はいくらでもあるはずですが、今回は成り行きで…

ちなみに、私はプログラムに関しては、ほぼ素人です。


[2012.10.10追記]

JQueryの$(".クラス名").attr("type", "number")でinputのtype属性を変更しようとしていたのですが、この方法だと「JavaScript 実行時エラー: type property can't be changed」となりHTML5で拡張されたtypeには変更できなかったのですが、document.getElementById("対象ID").setAttribute("type", "number")では変更可能でした。

ページ中のすべてのinputタグをまとめて変更するために、JQuery Mobileのpagecreateで以下を行ってみましたページロードやpageshowdでも可能かもしれません)。

$("#ページID").live('pagecreate', function () {
var ctls = document.getElementsByTagName("input");
for (var i = 0; i < ctls.length; i++) {
if (ctls[i].className) {
var res = ctls[i].className.match("(?:^|\s)number|date|datetime|datetime-llocal|month|week|time|telephone|tel|email|url|search|range|checkbox|radio|hidden|color(?:$|\s)")
if (res) {
//Type設定
ctls[i].setAttribute("Type", res);
}
}
}
});

typeを変更したいaspテキストボックスのCssClassには変更したいTypeを書きます。
<asp:TextBox ID="TextBox1" CssClass="date" runat="server"></asp:TextBox>

最初はclasslistを使って処理していたのですが、とりあえず古いブラウザを考慮してclassNameに変更しました。

コメントの投稿

管理者にだけ表示を許可する

コメント



 
プロフィール
Author:OMEGAT
FC2ブログへようこそ!
カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
FC2カウンター
最新記事
最新コメント
最新トラックバック
月別アーカイブ
忍者AdMax
検索フォーム
カテゴリ
ブロとも申請フォーム

この人とブロともになる

amazonお奨め商品



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。