« PHPのこと | メイン | オンラインカードゲーム案 »

2006年10月19日

NumericUpDownコントロール with JavaScript [DOM]

Windowsの一般的なアプリケーションには、テキストボックスの右に数値を上下させるボタンのついたNumericUpDownコントロールが使われている。数値の上下はもちろん、数値でない文字列は受け付けないという優れたやつだ。が、HTML Formにはそれがない。

というわけで、懐かしのDOMで作ってみました。

UpDownコントロールテストページ

ソース上ではただのテキストボックスですが、クラス名に "updown" と付けてこのスクリプトを噛ませるだけで、数値上下ボタンが出ます。

クラス名に "interval10" とすると10ずつ上下するようになり、 "max30" とすれば最大値が30 "min5" で最小値5になったりします。あと、数値以外を入力すると強制的に戻されます。

Mozilla Firefox1.5とInternet Explorer6では正常に動きました。Opera7.2では動きません。それ以外の環境ではテストしていませんが、動かなくてもべつに困らないので、深刻な問題にはならないでしょう。

困ったのが、IE6のname属性はsetAttributeできないというバグ。どうしてもイメージマップを生成できないので、泣く泣くouterHTML使いました。

投稿者 : 13:08 | コメント (2)

コメント

むしろ・・・何で、初期値が16なのか問いたい気分。

そして、下限が10で、上限が20についても。

投稿者 トラねこ : 2006年10月24日 00:51

いや、そこは突っ込むところではw
深く考えない、考えない

投稿者 無重力 : 2006年10月26日 22:07

コメントしてください




保存しますか?

(書式を変更するような一部のHTMLタグを使うことができます)