- PR -

Webでの金額表示

1
投稿者投稿内容
セルカー
ベテラン
会議室デビュー日: 2004/04/08
投稿数: 70
投稿日時: 2008-11-16 13:30
VS2005、ASP.NET(C#)で開発しています。

現在Windowsアプリケーションで作られているアプリを、Webでもなるべく近いユーザーインターフェースを実現しようとしているのですが、金額を入れる項目があったとき、3桁区切りや小数点の自動補正などは、皆さんはどのように実現されているのでしょうか?

現行のWindowsアプリでは、対象項目のフォーカスが失われたときに、自動的に形が補正されるようになっています(1000→1,000.00のように変換されます)。MaskedEditExtenderが一番近いかと思うのですが、もう一つ足りない感じを受けます。

設定の仕方が悪いだけかもしれませんが、もし他の方法で実現されている方がいらっしゃいましたら、是非ご教授いただきたく投稿しました。

宜しくお願いしますm(_ _)m
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-11-16 23:35
何を実装したいか、にもよりますが・・・

初期表示(テキストBOX右寄せ表示):\12,345
フォーカスIN(全選択状態・左寄せ表示):12345
フォーカスOUT or 改行入力して次のテキストBOXにフォーカス移動:\12,345

こーゆーのが希望してるやつ?

上記に加えて、
・誤入力があればフォーカスが飛ばない。(先頭以外に "\" とか、カンマの位置が悪いとか、数字以外とか、・・・)
・間違いの時は赤色表示にする。(間違いが訂正されたら元に戻る)。
・初期表示から変更された場合は黄色表示にする(初期表示→修正→修正した結果が初期表示なら黄色にしない)

とか色々機能を盛り込むとそれだけ複雑になります、ね。

さらに、テキストBOX間で連携するような場合は、マウスクリックによるフォーカスIN/OUTにも対応する必要があります。



忘れてた、あと、1つ。ドラッグドロップには気をつけましょうね。

画面のどこでもいいので選択して、それをドラッグしてテキストBOXにドラッグ
すると、実装によりけりですが、デッドロック状態になりますw

この前、3つのテキストBOXが連動する奴作ってて、検証時に、いじわるテストで
ドラッグドロップされて、見事に無限ループしました。IE なら、ondragenter を
ちょんぎって下さい。



[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-11-16 23:40 ]

[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-11-16 23:45 ]
セルカー
ベテラン
会議室デビュー日: 2004/04/08
投稿数: 70
投稿日時: 2008-11-18 17:20
ありがとうございます。

実装したいのはまさしく

初期表示(テキストBOX右寄せ表示):\12,345
フォーカスIN(全選択状態・左寄せ表示):12345
フォーカスOUT or 改行入力して次のテキストBOXにフォーカス移動:\12,345

です。

それ以外のところは特に実装する予定はありません。
MaskedEditExtenderとUpdatePanelを多用したら、なんか遅いので・・・

Webで金額を入れるようなプログラムは星の数ほどあると思いますので、何か標準的なものがあればと思ったのですが・・・

あと、ドラッグアンドドロップのところは全然知りませんでした。
テスト項目に加えたいと思います、ありがとうございます(゜▽゜)
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-11-19 00:29
MaskedEditExtender 使ったことが無いのですが、実装見れれば
後から加工も出来ますよ、たぶん。

何がどーゆー風にもたつくのかもう少し豊かな表現で書いてくれるといいですね。

僕の場合は、以下のようにして金額入力フィールドを実装しました。
(0)小数点は入らない。
(1)フォーカスOUTでカンマ編集と"\" を付ける。
(2)フォーカスINでカンマ全部取っ払い、"\" も取っ払う。
(3)\12,345 でも、123.45 でも 1,2345\ でも些細なミスは自動修正する。
(4)必須入力(ブランク or 金額)と任意入力が出来る。
(5)必須入力の時一旦フォーカスINしたら何をやっても正しい入力されるまで
   フォーカスを移動させない。
(6)バリデーションNGの時は任意のメッセージを表示する。
(7)初期表示時に背景・文字色が変更できる。
(8)非活性時は他と見た目が変わらないでしかもフォーカスが当たらない。
(9)入力文字制限は無し。バリデータで弾くから。

(8)が一番難儀でしたねw
   実装方法は、テキストBOXと同じ大きさのDIVタグで非活性時のみ表示して
   テキストBOXは非表示にしておく。テキストBOXと同じように凹み枠で文字
   色も背景も同じだけどフォーカスだけが当たらず、サーバーにポストもで
   きる、というなんとも贅沢な作りこみでした。

   ドロップリストの選択に応じて10個ある入力BOXの複数個が初期値を持っ
   て活性・非活性になったりするやつだったので。テキストBOXを単に非活性
   にしてしまうとサーバーに送ることが出来ないし、薄ボケたグレイ表示は
   あまり目に良くないとの理由からでした。



セルカー
ベテラン
会議室デビュー日: 2004/04/08
投稿数: 70
投稿日時: 2008-11-20 20:59
たびたびのご回答ありがとうございます。

今回の仕様では外貨も扱うことになるので、小数点以下の数字も扱うことになります(ですので¥マークは不要ですね・・・(´・ω・`))。

フォーカスINしたときはカンマを取っ払った形、フォーカスが離れたら3桁区切りのカンマが入る、この動きだけでよいのですが、MaskedEditExtenderを使ってしまうと、フォーカスINしたときに数字の下にアンダーバーがついてしまい、さらに入力もカンマが入っている状態です。否、正確に言うと、アンダーバー3つごとにカンマが入っている形で表示されます(__,___,___,___.__)見たいなかたちです。

それでも、空の状態のときは、直感的に分かりやすい動きになるのですが、一度データが入った状態で修正しようとすると、0が頭に残ったままになったり、分かりにくい挙動になってしまいます。

これから同様の入力フォームを大量に配置することになるので、何か簡単な方法があればと思ったのですが・・・
1

スキルアップ/キャリアアップ(JOB@IT)